js 的浅拷贝与深拷贝以及不同实现方式

举两个例子来说明浅拷贝与深拷贝

浅拷贝

// 浅拷贝
let origin = {
    p1: 1
};

let obj = {
    p2: 2,
    p3: {
        p4: 3
    }
};

let target = Object.assign(origin, obj);
console.log(target); // { p1: 1, p2: 2, p3: { p4: 3 } }
console.log(obj); // { p2: 2, p3: { p4: 3 } }

obj.p2 = 20;
console.log(target); // { p1: 1, p2: 2, p3: { p4: 3 } } target 的值并未修改
console.log(obj); // { p2: 20, p3: { p4: 3 } }

obj.p3.p4 = 30;
console.log(target); // { p1: 1, p2: 2, p3: { p4: 30 } } target 的值也被修改，说明复制过来的 p3 的值只是一个引用
console.log(obj); // { p2: 20, p3: { p4: 30 } }

深拷贝

// 深拷贝
let obj1 = {
    p1: 1,
    p2: {
        p3: 2
    }
};

let obj2 = JSON.parse(JSON.stringify(obj1));

obj1.p2.p3 = 20;
console.log(obj2); // { p1: 1, p2: { p3: 2 } } p3的值并未随着obj1的改变而改变

通过例子我们可以发现：对于源对象的引用类型，浅拷贝是对地址的复制，因此该地址的值改动后，源对象和拷贝对象的值都会改变。深拷贝是生成新的地址再拷贝值，源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。

其他不同实现方式

递归（深拷贝）

// 递归 （深拷贝）
function deepClone(target, source) {
    for (let key in source) {
        if (source[key] && typeof source[key] === 'object') {
            target[key] = source[key].construtor === Array ? [] : {};
            target[key] = deepClone(target[key], source[key]);
        } else {
            target[key] = source[key];
        }
    }
    return target;
}

let sObj = {
    p1: 1,
    p2: 'a',
    p3: {
        p4: 4
    },
    p5: [1, 2, 3, 4, 5]
}

let tObj = deepClone({ p6: 6 }, sObj);
sObj.p3.p4 = 40;
sObj.p5 = [2, 2, 2, 2];
console.log(tObj); // 值未改变 { p6: 6, p1: 1, p2: 'a', p3: { p4: 4 }, p5: { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 } }

es6 扩展运算符（浅拷贝）

// es6 的扩展运算符（浅拷贝）
let source = {
    p1: 1,
    p2: 'a',
    p3: {
        p4: 4
    }
}

let targetObj = {
    p5: 5,
    ...source
}

source.p3.p4 = 40;
console.log(targetObj); // 值改变 { p5: 5, p1: 1, p2: 'a', p3: { p4: 40 } }

收藏

喜欢 0