JavaScript深拷贝踩坑小记

一、关于深拷贝

关于深拷贝与浅拷贝的理解，这里不过多的进行描述。因为此前自己总结了一次深拷贝的常见方法，JSON.parse(JSON.stringify(obj))，jQury的$.extend(true,{},obj)，for...in加递归已经满足了大部分的业务需求。具体内容可见JavaScript之深拷贝和浅拷贝

二、然而，有坑！

const data = {
    arr: ["test0", "test1"],
    obj: { title: '标题', dataIndex: "name" },
    onClick: () => { console.log('this is a function') },
    date: new Date(),
}

const deepCopy = function (obj) {
    var str, newobj = obj.constructor === Array ? [] : {};
    if (typeof obj !== 'object') {
        return;
    } else if (window.JSON) {
        str = JSON.stringify(obj), //json对象转字符串，系列化
            newobj = JSON.parse(str); //还原为json对象
    } else {
        for (var i in obj) {
            newobj[i] = typeof obj[i] === 'object' ?
                deepCopy(obj[i]) : obj[i];
        }
    }
    return newobj;
};


const result1 = JSON.parse(JSON.stringify(data));
const result2 = deepCopy(data);

console.log('------------------------------------');
console.log(result1);
console.log('------------------------------------');

console.log('------------------------------------');
console.log(result2);
console.log('------------------------------------');

由以下输出结果，可以看出，这两个方法无法拷贝含有function，date属性的对象！！！

三、解决方案

1. 结构化克隆算法

//需要进一步完善处理对待各种类型；
const deepCopy = (obj, hash = new WeakMap()) => {
    let cloneObj
    let Constructor = obj.constructor
    switch (Constructor) {
        case Object:
            cloneObj = new Constructor(obj)
            break
        case RegExp:
            cloneObj = new Constructor(obj)
            break
        case Date:
            cloneObj = new Constructor(obj.getTime())
            break
        default:
            if (hash.has(obj)) return hash.get(obj)
            cloneObj = new Constructor()
            hash.set(obj, cloneObj)
    }
    for (let key in obj) {
        cloneObj[key] = obj[key].constructor === constructor ? deepCopy(obj[key], hash) : obj[key];
    }
    return cloneObj
}

const result3 = deepCopy(data);

console.log('------------------------------------');
console.log(result3);
console.log('------------------------------------');

参考MDN上的结构化克隆算法，下图为输出结果，达到预期效果：

2. lodash中的_.cloneDeep() 方法

目前是我觉得最直接，最完整的解决方案，毕竟可以一句话解决问题，绝不多说一句（其实我就是懒）。

lodash中文文档
[1]: https://juejin.im/post/5b235b726fb9a00e8a3e4e88