在前端开发中，经常需要对对象进行拷贝操作，以便于对其进行修改或者传递给其他函数。在 ES8 中，新增了 assign 方法和 Spread 操作符，让对象拷贝更加容易和灵活。
assign 方法
assign 方法可以将一个或多个源对象的属性复制到目标对象中，并返回目标对象。其语法如下：
Object.assign(target, ...sources)
其中，target 是目标对象，sources 是一个或多个源对象。如果多个源对象中有相同的属性，则后面的属性会覆盖前面的属性。
下面是一个示例：
const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const obj3 = Object.assign({}, obj1, obj2); console.log(obj3); // { a: 1, b: 3, c: 4 }
在上面的示例中，我们将 obj1 和 obj2 的属性复制到一个新的空对象中，得到了 obj3。由于 obj2 中的 b 属性覆盖了 obj1 中的 b 属性，所以最终的 obj3 中的 b 值为 3。
除了复制对象属性外，assign 方法还可以用于合并对象。例如：
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { b: { d: 3 } }; const obj3 = Object.assign({}, obj1, obj2); console.log(obj3); // { a: 1, b: { d: 3 } }
在上面的示例中，我们将 obj1 和 obj2 的属性复制到一个新的空对象中，得到了 obj3。由于 obj2 中的 b 属性是一个对象，所以它覆盖了 obj1 中的 b 属性，最终得到的 obj3 中的 b 属性为 { d: 3 }。
Spread 操作符
Spread 操作符可以将一个可迭代对象（比如数组或字符串）展开为多个参数，也可以将一个对象展开为多个键值对。其语法如下：
-- -------------------- ---- ------- -- ---- ----- ---- - --- -- --- ----- ---- - --------- -- --- ------------------ -- --- -- -- -- -- -- ----- ----- ---- - -------- ----- ---- - --------- - -- --------- ------------------ -- ----- ---- ---- ---- ---- - -- ---- ---- ---- ---- ---- -- ---- ----- ---- - - -- -- -- - -- ----- ---- - - -------- -- - -- ------------------ -- - -- -- -- -- -- - -展开代码
在上面的示例中，我们使用了 Spread 操作符将一个数组、一个字符串和一个对象展开为多个参数或键值对。注意，展开对象时，如果有相同的属性，则后面的属性会覆盖前面的属性。
深拷贝和浅拷贝
在进行对象拷贝时，需要注意深拷贝和浅拷贝的区别。浅拷贝只会复制对象的第一层属性，而深拷贝会递归复制对象的所有属性。如果对象的属性值是一个对象或数组，浅拷贝只会复制它们的引用，而深拷贝会复制它们的值。
下面是一个示例：
-- -------------------- ---- ------- ----- ---- - - -- -- -- - -- - - -- ----- ---- - ----------------- ------ ----- ---- - - ------- -- ------ - -- -------- - -- ------------------ -- - -- -- -- - -- - - - ------------------ -- - -- -- -- - -- - - - ------------------ -- - -- -- -- - -- - - -展开代码
在上面的示例中，我们使用了 Object.assign 和 Spread 操作符分别进行了浅拷贝。我们可以看到，修改 obj2 的属性不会影响 obj1，但修改 obj3 的属性会影响 obj1。这是因为 obj2 和 obj3 只是复制了 obj1 的第一层属性，而 obj1.b 是一个对象，浅拷贝只会复制它的引用。
如果想要进行深拷贝，可以使用 JSON.parse 和 JSON.stringify 方法，或者使用第三方库（比如 lodash 的 cloneDeep 方法）。
总结
ES8 中的 assign 方法和 Spread 操作符为对象拷贝提供了更加方便和灵活的方式。在使用它们时，需要注意深拷贝和浅拷贝的区别，以及对象属性中是否包含对象或数组。对于复杂的对象拷贝操作，可以考虑使用第三方库来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ea59deb4cecbf2d480123
