在前端开发中，经常需要对对象进行拷贝操作，以便于对其进行修改或者传递给其他函数。在 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 操作符可以将一个可迭代对象（比如数组或字符串）展开为多个参数，也可以将一个对象展开为多个键值对。其语法如下：
// 展开数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
// 展开字符串
const str1 = 'hello';
const str2 = [...str1, ' ', 'world'];
console.log(str2); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
// 展开对象
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }在上面的示例中，我们使用了 Spread 操作符将一个数组、一个字符串和一个对象展开为多个参数或键值对。注意，展开对象时，如果有相同的属性，则后面的属性会覆盖前面的属性。
深拷贝和浅拷贝
在进行对象拷贝时，需要注意深拷贝和浅拷贝的区别。浅拷贝只会复制对象的第一层属性，而深拷贝会递归复制对象的所有属性。如果对象的属性值是一个对象或数组，浅拷贝只会复制它们的引用，而深拷贝会复制它们的值。
下面是一个示例：
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
const obj3 = { ...obj1 };
obj2.a = 3;
obj3.b.c = 4;
console.log(obj1); // { a: 1, b: { c: 4 } }
console.log(obj2); // { a: 3, b: { c: 2 } }
console.log(obj3); // { a: 1, b: { c: 4 } }在上面的示例中，我们使用了 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