// 浅拷贝 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的改变而改变
经过例子咱们能够发现:对于源对象的引用类型,浅拷贝是对地址的复制,所以该地址的值改动后,源对象和拷贝对象的值都会改变。深拷贝是生成新的地址再拷贝值,源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另一个对象形成影响。es6
// 递归 (深拷贝) 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 的扩展运算符(浅拷贝) 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 } }