前端開發實用工具類函數

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

檢測是不是數組

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'];

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