前端开发实用工具类函数

抽空整理了一下日常开发中会经常用到的工具函数

检测是否是数组

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

后续会有更多实用工具函数。。。。。