ES6 中的对象扩展运算符是一个非常强大的语法，它可以让我们快速地将一个对象的所有属性复制到另一个对象中，或者从一个对象中提取出需要的属性。在本篇文章中，我们将详细讲解对象扩展运算符的使用技巧，以及如何发挥它的最大作用。
语法
ES6 中的对象扩展运算符由三个点（...）组成，放在对象名之前。例如：
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // 输出 { x: 1, y: 2 }在上面的例子中，obj2 通过对象扩展运算符复制了 obj1 的所有属性。
复制对象
通过对象扩展运算符，我们可以快速地复制对象的所有属性。例如：
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1 };
// 修改 obj2 的属性
obj2.x = 3;
console.log(obj1); // 输出 { x: 1, y: 2 }
console.log(obj2); // 输出 { x: 3, y: 2 }在这个例子中，obj2 复制了 obj1 的所有属性。然后我们修改了 obj2 的 x 属性，但是 obj1 的 x 属性没有被修改，说明它们是两个不同的对象。
合并对象
除了复制对象外，对象扩展运算符还可以用于合并对象。
const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 输出 { x: 1, y: 2, z: 3 }在这个例子中，我们通过对象扩展运算符合并了 obj1 和 obj2，生成了一个新的对象 obj3，它包含了 obj1 和 obj2 的所有属性。
需要注意的是，如果两个对象有相同的属性名，后面的对象会覆盖前面的对象。
const obj1 = { x: 1, y: 2 };
const obj2 = { y: 3, z: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 输出 { x: 1, y: 3, z: 4 }在这个例子中，obj2 的 y 属性覆盖了 obj1 的 y 属性。
提取属性
除了复制和合并对象外，对象扩展运算符还可以用于提取对象的属性。
const obj1 = { x: 1, y: 2, z: 3 };
const { x, ...rest } = obj1;
console.log(x); // 输出 1
console.log(rest); // 输出 { y: 2, z: 3 }在这个例子中，我们通过对象扩展运算符提取了 obj1 的 x 属性，赋值给了变量 x。剩下的属性被合并为一个新的对象 rest，它不包含 x 属性。
需要注意的是，提取属性只能用于声明变量，不能用于赋值。
const obj1 = { x: 1, y: 2, z: 3 };
const x; // 错误，不能用于声明变量
const { x } = obj1; // 正确，用于声明变量深度拷贝
如果要对一个对象进行深度拷贝，不能简单地使用对象扩展运算符进行复制，因为对象的属性可能是引用类型，直接复制会导致两个对象共享同一个引用。正确的深度拷贝方式是使用递归。
-- -------------------- ---- -------
-------- ------------- -
-- ------- --- --- -------- -- --- --- ----- -
------ ----
-
----- ---- - ------------------ - -- - ---
---------------------------- -- -
--------- - -------------------
---
------ -----
-在这个例子中，我们通过递归实现了深度拷贝。如果遇到一个非对象或者是 null，就直接返回。如果遇到数组，就创建一个新的空数组，遍历原数组中的每个元素，调用 deepCopy 函数对其进行递归处理，并将处理结果放入新数组中。如果遇到对象，就创建一个新的空对象，遍历原对象的每个键值对，调用 deepCopy 函数对值进行递归处理，并将处理结果作为新对象的属性。
总结
对象扩展运算符是 ES6 中的一个非常强大的语法，它可以用于复制、合并、提取对象属性等多种场景，帮助我们更加快速地编写代码。需要注意的是，如果要对一个对象进行深度拷贝，不能直接使用对象扩展运算符进行复制，需要使用递归实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468a43d968c7c53b08d2995