js函数实现：数组扁平化、防抖、节流、对象拷贝

1.数组扁平化初探

ES6中数组的扩展引入了flat和flatMap：
数组的flat方法：

var arr = [1,2,3,[4,5,[6,7]]];
arr.flat(); // [1,2,3,4,5,[6,7]] 默认扁平化1层
arr.flat(2);    // [1,2,3,4,5,6,7] 扁平化2层
arr.flat(Infinity); // [1,2,3,4,5,6,7] 扁平化所有

数组的flatMap方法：

参考MDN

// map与flatMap
var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

手动实现一个数组扁平化方法

// depth-扁平层数
function flattenArr(arr, depth=1){
    let res = [];
    // 遍历每一项
    arr.forEach(v => {
        // 判断子项是否为数组，是否已达到指定深度
        if(Array.isArray(v) && depth > 0){
            // 递归调用
            res.push(...flattenArr(v, --depth)) 
        }else{
            res.push(v)
        }
    })
    return res;
}

var arr = [1,2,3,[4,5,[6,7]]];
flattenArr(arr,2)
// [1,2,3,4,5,6,7]

2.函数柯里化初探

// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

或者说，将下面这个函数柯里化：

function add(...args) {
    return args.reduce((a, b) => a + b);
}
add(1,2,3,4) // 10

function add(){
    let args = [].slice.call(arguments);
    
    let outerAdd = function(){
        var innerAdd = function(){
            args.push(...arguments);
            return innerAdd;
        };
        
        innerAdd.toString = function() {
            return args.reduce(function(a, b) { 
                return a + b;
            });
        };
        return innerAdd;
    };
    return outerAdd(...args);
}

add(1)(2)(3)(4);   // f 10
add(1, 2, 3, 4);   // f 10
add(1, 2)(3, 4);   // f 10
add(1, 2, 3)(4);   // f 10

add(1)(2)(3)(4) + 10 // 20

深入详解函数的柯里化

3.防抖（debounce）与节流(throttle)初探

防抖：设置一个时间间隔K秒，在K秒内多次触发事件，只会在最后一次事件结束后K秒触发事件回调，如果在最后一次事件结束不满K秒的过程中再次触发时间则会清除掉之前的定时器，并重新计时。
节流：设置一个时间间隔K秒，开始频繁的触发事件，事件每隔K秒便会触发一次。

参考文档： Debouncing Javascript Methods

参考文档：Debouncing and Throttling Explained Through Examples

参考文档：实例解析防抖动（Debouncing）和节流阀（Throttling）

1.防抖

/**
* 防抖
* @param func: function 控制的回调函数
* @param threshold: number 控制的时间，单位ms
* @param execAsap: boolean 控制执行 false - 检测开始时执行 true - 检测期结束时执行
* */
function debounce(func, threshold, execAsap) {
    var timeout;
    return function debounced(){
        var obj = this;
        var args = arguments;
        function delayed(){
            if(!execAsap){ // false 检测开始时执行(马上执行)
                func.apply(obj, args);
           }
           timeout = null;
        }
        if(timeout){
         clearTimeout(timeout);
        }else if(execAsap){ // true 检测结束时执行(等待执行)
            func.apply(obj,args);
        }
        timeout=setTimeout(delayed,threshold || 100)
    }
}

// 使用
document.onmousemove = debounce(function (e) {
    console.log('防抖');
}, 500, false);

2. 节流

/**
* 节流
* @param func: function 控制的回调函数
* @param delay: number 控制的时间，单位ms
* */
function throttle(func, delay) {
    var timer = null;
    var startTime = Date.now();
    return function() {
        var curTime = Date.now();
        var remaining = delay - (curTime - startTime);
        var obj = this;
        var args = arguments;
        clearTimeout(timer);
        if(remaining <= 0) {
            func.apply(obj, args);
            startTime = Date.now();
        } else {
            timer = setTimeout(func, remaining);
        }
    }
}

// 使用
window.addEventListener('scroll', throttle(function(){
    console.log('节流')
}, 1000));

4. 对象拷贝

对象拷贝都知道分为深拷贝和浅拷贝。

简单理解，就是：

浅拷贝：修改B对象的属性和方法会影响到A对象的属性和方法, 我们称之为浅拷贝。
深拷贝：修改B对象的属性和方法不会影响到A对象的属性和方法, 我们称之为深拷贝。

深拷贝方法一：

JSON.parse(JSON.stringify(obj))

深拷贝方法二：

/**
* 对象拷贝
* @param value: object 拷贝对象
* @param isDeep: boolean true - 深拷贝 false - 浅拷贝
* */
function clone(value, isDeep) {
    if(value === null){return null;}
    
    if(typeof value != 'object') {return value}
    
    if(Array.isArray(value)) {
        if(isDeep) { // 深拷贝
            return value.map(item => clone(item, true)) // 递归调用
        }
        // 浅拷贝
        return [...value]
    } else {
        if(isDeep) {
            var obj = {};
            Object.keys(value).forEach(item => {
                obj[item] = clone(value[item], true)
            })
            return obj;
        }
        return {...value}
    }
}

// 使用
var objects = { c: { 'a': 1, e: [1, {f: 2}] }, d: { 'b': 2 } };

var shallow = clone(objects, true);

console.log(shallow.c.e[1]); // { f: 2 }

console.log(shallow.c === objects.c); // false

console.log(shallow.d === objects.d); // false

console.log(shallow === objects); // false