工具函数库

防抖函数

作用: 在任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
例子: 用户名输入校验的情况，可以等待用户输入完成后再发送请求去校验。

/**
 * 防抖函数
 * @param {Function} callback
 * @param {Number} time
 */
export function debounce(callback, time){
    //定时器变量
    let timeId = null;
    //返回一个函数
    return function(e){
        //判断
        if(timeId !== null){
            //清空定时器
            clearTimeout(timeId);
        }
        //启动定时器
        timeId = setTimeout(() => {
            //执行回调
            callback.call(this, e);
            //重置定时器变量
            timeId = null;
        }, time);
    }
}

节流函数

作用: 指定时间间隔内只会执行一次任务
例子: 滚动条滚动时函数的处理，可以通过节流适当减少响应次数；

/**
 * 节流函数
 * @param {Function} callback
 * @param {Number} wait
 */
export function throttle(callback, wait){
    //定义开始时间
    let start = 0;
    //返回结果是一个函数
    return function(e){
        //获取当前的时间戳
        let now = Date.now();
        //判断
        if(now - start >= wait){
            //若满足条件, 则执行回调函数
            callback.call(this, e);
            //修改开始时间
            start = now;
        }
    }
}

数组去重

/**
 * 数组去重
 * @param {Array} array
 */
export function unique (array) {
  return [...new Set(array)]
}

浅拷贝

/**
 * 浅拷贝
 * @param {Object} target
 */
export function clone(target){
    //类型判断  {}  []  null
    if(typeof target === 'object' && target !== null){
        //判断数据是否为数组
        if(Array.isArray(target)){
            return [...target];
        }else{
            return {...target};
        }
    }else{
        return target;
    }
}

/**
 * 
 * @param {*} target 
 */
export function clone2(target){
    //判断
    if(typeof target === 'object' && target !== null){
        //创建一个容器
        const result = Array.isArray(target) ? [] : {};
        //遍历 target 数据
        for(let key in target) {
            //判断当前对象身上是否包含该属性
            if(target.hasOwnProperty(key)){
                //将属性设置到 result 结果数据中
                result[key] = target[key];
            }
        }
        return result;
    }else{
        return target;
    }
}

深拷贝

/**
 * 深拷贝 
 * @param {Object} target  
 */
export function deepClone(target, map=new Map()){
    //检测数据的类型
    if(typeof target === 'object' && target !== null ){
        //克隆数据之前, 进行判断, 数据之前是否克隆过
        let cache = map.get(target);
        if(cache){
            return cache;
        }
        //判断目标数据的类型
        let isArray = Array.isArray(target);
        //创建一个容器
        const result = isArray ? [] : {};
        //将新的结果存入到容器中
        map.set(target, result);
        //如果目标数据为数组
        if(isArray){
            //forEach 遍历
            target.forEach((item, index) => {
                result[index] = deepClone(item, map);
            });
        }else{
            //如果是对象, 获取所有的键名, 然后 forEach 遍历
            Object.keys(target).forEach(key => {
                result[key] = deepClone(target[key], map);
            });
        }
        return result;
    }else{
        return target;
    }
}

export function deepClone1(target){
    //通过数据创建 JSON 格式的字符串
    let str = JSON.stringify(target);
    //将 JSON 字符串创建为 JS 数据
    let data = JSON.parse(str);
    return data;    
}

export function deepClone2(target){
    //检测数据的类型
    if(typeof target === 'object' && target !== null ){
        //创建一个容器
        const result = Array.isArray(target) ? [] : {};
        //遍历对象
        for(let key in target){
            //检测该属性是否为对象本身的属性(不能拷贝原型对象的属性)
            if(target.hasOwnProperty(key)){
                //拷贝
                result[key] = deepClone2(target[key]);
            }
        }
        return result;
    }else{
        return target;
    }
}

数组中的函数

多维数组

/**
 * 数组分块儿
 * @param {Array} arr 
 * @param {Number} size 
 */
export function chunk(arr, size=1){
    //判断
    if(arr.length === 0){
        return [];
    }
    //声明两个变量
    let result = [];
    let tmp = [];// [1,2,3]
    //遍历
    arr.forEach(item => {
        //判断tmp元素长度是否为 0
        if(tmp.length === 0){
            //将 tmp 压入到 result 中
            result.push(tmp);
            // [ [1,2,3], [4,5,6], [7] ]
        }
        //将元素压入到临时数组 tmp 中
        tmp.push(item);
        //判断
        if(tmp.length === size){
            tmp = [];
        }
    });
    return result;
}

数组连接

/**
 * 
 * @param {Array} arr 
 * @param  {...any} args 
 */
export function concat(arr, ...args){
    //声明一个空数组
    const result = [...arr];
    //遍历数组
    args.forEach(item => {
        //判断 item 是否为数组
        if(Array.isArray(item)){
            result.push(...item);
        }else{
            result.push(item);
        }
    });
    //返回 result
    return result;
}

常用的方法

/**
 * 
 * @param {Array} arr 
 * @param {Function} callback 
 */
export function map(arr, callback){
    //声明一个空的数组
    let result = [];
    //遍历数组
    for(let i=0;i<arr.length;i++){
        //执行回调
        result.push(callback(arr[i], i));
    }
    //返回结果
    return result;
}

/**
 * 
 * @param {Array} arr 
 * @param {Function} callback 
 * @param {*} initValue 
 */
export function reduce(arr, callback, initValue){
    //声明变量
    let result = initValue;
    //执行回调
    for(let i=0;i<arr.length;i++){
        //执行回调
        result = callback(result, arr[i]);
    }
    //返回最终的结果
    return result;
}

/**
 * 
 * @param {Array} arr 
 * @param {Function} callback 
 */
export function filter(arr, callback){
    //声明空数组
    let result = [];
    //遍历数组
    for(let i=0;i<arr.length;i++){
        //执行回调
        let res = callback(arr[i], i);
        //判断 如果为真则压入到 result 结果中
        if(res){
            result.push(arr[i]);
        }
    }
    //返回结果
    return result;
}

/**
 * 
 * @param {Array} arr 
 * @param {Function} callback 
 */
export function find(arr, callback){
    //遍历数组
    for(let i=0;i<arr.length;i++){
        //执行回调
        let res = callback(arr[i], i);
        //判断
        if(res){
            //返回当前正在遍历的元素
            return arr[i];
        }
    }
    //如果没有遇到满足条件的 返回 undefined
    return undefined;
}

/**
 * 
 * @param {Array} arr 
 * @param {Function} callback 
 */
export function findIndex(arr, callback){
    //遍历数组
    for(let i=0;i<arr.length;i++){
        //执行回调
        let res = callback(arr[i], i);
        //判断
        if(res){
            //返回当前正在遍历的元素
            return i;
        }
    }
    //如果没有遇到满足条件的 返回 undefined
    return -1;
}

/**
 * 
 * @param {Array} arr 
 * @param {Function} callback 
 */
export function every(arr, callback){
    //遍历数组
    for(let i=0;i<arr.length;i++){
        // 执行回调 如果回调执行返回结果为 false
        if(!callback(arr[i], i)){
            return false;
        }
    }
    //如果都满足条件则返回 true
    return true;
}


/**
 * 
 * @param {Array} arr 
 * @param {Function} callback 
 */
export function some(arr, callback){
    //遍历数组
    for(let i=0;i<arr.length;i++){
        // 执行回调 如果回调执行返回结果为 false
        if(callback(arr[i], i)){
            return true;
        }
    }
    //如果都满足条件则返回 true
    return false;
}