对象混合

手写:

const mixin = (obj1, obj2) =>{
    var newObj = {};
    //复制obj2的属性
    for (var prop in obj2) {
        newObj[prop] = obj2[prop];
    }
    //找到obj1中有但是obj2中没有的属性
    for (var prop in obj1) {
        if (!(prop in obj2)) {
            newObj[prop] = obj1[prop];
        }
    }
    return newObj;
}

方法： Object.assign()

const obj1={a:1,b:2};
const obj2={a:2,b:3,c:4};

const newObj = Object.assign(obj1, obj2);//会改变obj1，返回值和obj1相同  newObj === obj1

Object.assign({}, obj1, obj2);//不会改变obj1，返回值是一个新对象   obj2如果没有也不影响

应用场景

const obj={a:1,b:2};

//用户传递配置对象，不传递也可以有默认值
const complecation = function (obj) {
    const config = {
        a:"default-a",
        b:"default-b",
        c:"default-c",
        d:"default-d",
    }
    Object.assign(config, obj);
    //xxx其余代码
}

对象克隆

浅拷贝

this.myPlugin.clone = function (obj) {
    if (Array.isArray(obj)) {
            return obj.slice(); //复制数组
    }
    else if (typeof obj === "object") {
        var newObj = {};
        for (var prop in obj) {
            newObj[prop] = obj[prop];
        }
        return newObj;
    }
    else {
        //函数、原始类型
        return obj; //递归的终止条件
    }
}

深拷贝

/**
 * 克隆一个对象
 * @param {boolean} deep 是否深度克隆
 */
this.myPlugin.clone = function (obj, deep) {
    if (Array.isArray(obj)) {
        if (deep) {
            //深度克隆
            var newArr = [];
            for (var i = 0; i < obj.length; i++) {
                newArr.push(this.clone(obj[i], deep));
            }
            return newArr;
        }
        else {
            return obj.slice(); //复制数组
        }
    }
    else if (typeof obj === "object") {
        var newObj = {};
        for (var prop in obj) {
            if (deep) {
                //深度克隆
                newObj[prop] = this.clone(obj[prop], deep);
            }
            else {
                newObj[prop] = obj[prop];
            }
        }
        return newObj;
    }
    else {
        //函数、原始类型
        return obj; //递归的终止条件
    }
}

防抖

/**
 * 函数防抖
 */
this.myPlugin.debounce = function (callback, time) {
    var timer;
    return function () {
        clearTimeout(timer);//清除之前的计时
        var args = arguments; //利用闭包保存参数数组
        timer = setTimeout(function () {
            callback.apply(null, args);
        }, time);
    }
}

var inp = document.querySelector("input");

var handle = myPlugin.debounce(function(val, inp) {
    console.log("搜索" + val);
    console.log(inp);
}, 1000);

inp.oninput = function() {
    handle(this.value, this);//解决防抖的this，放在debounce外部来处理，将this作为第二个参数传递即可。
}

节流

/**
 * 函数节流
 */
this.myPlugin.throttle = function (callback, time, immediately) {
    if (immediately === undefined) {
        immediately = true;
    }
    if (immediately) {
        // 使用时间戳的方式实现，特点是立即执行一次
        var t;
        return function () {
            if (immediately) {
                if (!t || Date.now() - t >= time) { //之前没有计时 或 距离上次执行的时间已超过规定的值
                    callback.apply(null, arguments);
                    t = Date.now(); //得到的当前时间戳
                }
            }
        }
    }
    else {
        // 使用定时器的方式实现，特点是不会立即执行，但是会最后执行一次
        var timer;
        return function () {
            if (timer) {
                return;
            }
            var args = arguments; //利用闭包保存参数数组
            timer = setTimeout(function () {
                callback.apply(null, args);
                timer = null;
            }, time);
        }
    }
}