前端開發實用工具類函數

ZoomQuiet 發布于2019-08-23 11:56 / 2905人閱讀

摘要：獲取參數正則法調用參數名拆分法獲取中符后的字串調用參數參數參數參數參數參數參數參數參數參數參數參數后續會有更多實用工具函數。。。。。

抽空整理了一下日常開發中會經常用到的工具函數

檢測是否是數組

export default const judgeArr=(arr)=>{
    if(Array.isArray(arr)){
        return true;
    }
}

數組的”短路運算”every和some

情況一:全部滿足
 
export const allTrueArr=(arrs)=>{
  return arr.every((arr)=>{
     return arr>20;//如果數組的每一項都滿足則返回true,如果有一項不滿足返回false,終止遍歷
  })  
}
 
情況二:有一個滿足
export default const OneTrueArr=(arrs)=>{
  return arr.some((arr)=>{
     return arr>20;//如果數組有一項滿足則返回true,終止遍歷,每一項都不滿足則返回false
  })  
}

多維數組轉一維

// 遞歸
let newArr = [];

function flatten(arr) {
    for(let i = 0; i < arr.length; i++) {
        if(Array.isArray(arr[i])) {
            flatten(arr[i])
        } else {
            newArr.push(arr[i])
        }
    }
}

// reduce+遞歸
let arr = [1, [2, [[3, 4], 5], 6]];
const flatten = arr => arr.reduce((total,current) => {
    total.concat(Array.isArray(current) ? flatten(current) : current)
}, [])

獲取當前的時間yyyy-MM-dd HH:mm:ss（沒有滿10就補0）

export default const obtainDate=()=>{
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day=date.getDate();
  let hours=date.getHours();
  let minu=date.getMinutes();
  let second=date.getSeconds();
  //判斷是否滿10
  let arr=[month,day,hours,minu,second];
  arr.forEach(item=>{
    item< 10?"0"+item:item;
  })
  return year+"-"+arr[0]+"-"+arr[1]+" "+arr[2]+":"+arr[3]+":"+arr[4]      
}

函數防抖（debounce）和節流（throttle）

Debounce
原理:通過重復調用函數，清空定時器，在函數不再被調用的時候觸發一次

function debounce(method,delay){
    var timer = null;
    return function(){
        vat _that = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(_that,args);
        },delay)
    }
}

Throttle
原理:通過判斷時間間隔、間隔一定的時間頻率調用函數

function throttle(fn,delay,duration){
    // fn 待執行函數 / delay 定時器延時時間 / duration 間隔時間
    var timer = null;
    var begin = +new Date();
    return function(){
        var _that = this;
        var now = +new Date();
        clearTimeout(timer);
        if(duration){
            if(now - begin >= duration){
                fn.apply(_that,arguments);
                begin = now;
            }
        } else {
            timer = setTimeout(fn,delay);
        }
    }
}

setTimeout(f, 0)

setTimeout的作用是將代碼推遲到指定時間執行，如果指定時間為0，即setTimeout(f, 0)，那么會立刻執行嗎？

答案是不會。因為必須要等到當前腳本的同步任務，全部處理完以后，才會執行setTimeout指定的回調函數f。也就是說，setTimeout(f, 0)會

在下一輪事件循環一開始就執行。

setTimeout(function () {
  console.log(1);
}, 0);
console.log(2);
// 2
// 1

上面代碼先輸出2，再輸出1。因為2是同步任務，在本輪事件循環執行，而1是下一輪事件循環執行。

總之，setTimeout(f, 0)這種寫法的目的是，盡可能早地執行f（放在異步任務隊列的前面優先執行），但是并不能保證立刻就執行f。

獲取url參數（QueryString）

正則法：

function getQueryString (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
//調用
getQueryString ("參數名")；

        OR

var getParam = function (name) {
    var search = document.location.search;
    //alert(search);
    var pattern = new RegExp("[?&]" + name + "=([^&]+)", "g");
    var matcher = pattern.exec(search);
    var items = null;
    if (null != matcher) {
        try {
            items = decodeURIComponent(decodeURIComponent(matcher[1]));
        } catch (e) {
            try {
                items = decodeURIComponent(matcher[1]);
            } catch (e) {
                items = matcher[1];
            }
        }
    }
    return items;
};

split拆分法：

function GetRequest() {
    var url = location.search; //獲取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
var Request = new Object();
Request = GetRequest();

// 調用
// var 參數1,參數2,參數3,參數N;
// 參數1 = Request["參數1"];
// 參數2 = Request["參數2"];
// 參數3 = Request["參數3"];
// 參數N = Request["參數N"];

后續會有更多實用工具函數。。。。。

云服務器 GPU云服務器前端工具函數前端開發工具前端開發用什么工具類成員函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97716.html

前端面試題（3）現代技術

摘要：什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面，后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時，將導航頁傳輸到客戶端，其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。什么是單頁面應用(SPA)？單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續請求都無需再離開此頁目標：旨在用為用戶提供了更接近本地...

EasonTyler 2019-08-26 11:58 評論0 收藏0
前端面試題（3）現代技術

摘要：什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面，后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時，將導航頁傳輸到客戶端，其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。什么是單頁面應用(SPA)？單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續請求都無需再離開此頁目標：旨在用為用戶提供了更接近本地...

trigkit4 2019-08-02 10:37 評論0 收藏0
gitbook: 前端好書推薦

摘要：它大致概述并討論了前端工程的實踐如何學習它，以及在年實踐時使用什么工具。目的是每年發布一次內容更新。前端實踐第一部分廣泛描述了前端工程的實踐。對大多數人來說，函數式編程看起來更加自然。 1 Front-End Developer Handbook 2017 地址：https://frontendmasters.com/b... 這是任何人都可以用來了解前端開發實踐的指南。它大致概述并...

Ali_ 2019-08-20 17:17 評論0 收藏0
gitbook: 前端好書推薦

摘要：它大致概述并討論了前端工程的實踐如何學習它，以及在年實踐時使用什么工具。目的是每年發布一次內容更新。前端實踐第一部分廣泛描述了前端工程的實踐。對大多數人來說，函數式編程看起來更加自然。 1 Front-End Developer Handbook 2017 地址：https://frontendmasters.com/b... 這是任何人都可以用來了解前端開發實踐的指南。它大致概述并...

CocoaChina 2019-08-29 12:46 評論0 收藏0
gitbook: 前端好書推薦

摘要：它大致概述并討論了前端工程的實踐如何學習它，以及在年實踐時使用什么工具。目的是每年發布一次內容更新。前端實踐第一部分廣泛描述了前端工程的實踐。對大多數人來說，函數式編程看起來更加自然。 1 Front-End Developer Handbook 2017 地址：https://frontendmasters.com/b... 這是任何人都可以用來了解前端開發實踐的指南。它大致概述并...

Warren 2019-08-01 16:58 評論0 收藏0