JS实现深拷贝

Posted 2020-12-18 DRQ丶

    我们知道，JS中的=运算符实现的只是浅拷贝，默认的各种方法只是实现了第一层深拷贝，再深层也是浅拷贝。

所以实现深拷贝的方法，就是进行递归，然后拷贝。

    首先，实现一个浅拷贝：

function cloneShallow(source) {
    var target = {};
    for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
        }
    }
    return target;
}

// 测试用例
var a = {
    name: "zzsealy",
    book: {
        title: "learnJS",
        price: "45"
    },
    a1: undefined,
    a2: null,
    a3: 123
}
var b = cloneShallow(a);

a.name = "前端进阶";
a.book.price = "55";

console.log(b);
// { 
//   name: ‘zzsealy‘, 
//   book: { title: ‘laernJS‘, price: ‘45‘ },
//   a1: undefined,
//   a2: null,
//   a3: 123
// }

　　深拷贝和浅拷贝的实现区别，就是深拷贝进行了递归：

function cloneDeep1(source) {
    var target = {};
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (typeof source[key] === ‘object‘) {
                target[key] = cloneDeep1(source[key]); // 注意这里 进行了递归。
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 使用上面测试用例测试一下
var b = cloneDeep1(a);
console.log(b);
// { 
//   name: ‘muyiy‘, 
//   book: { title: ‘learnJS‘, price: ‘45‘ }, 
//   a1: undefined,
//   a2: {},
//   a3: 123
// }