在 ECMAScript 2016（通常称为 ES7）中，引入了对象展开操作符（Object spread operator），一种新的操作符，用于简化对象和数组的创建和合并。该操作符提供了基于对象或数组的浅层复制和合并。
语法
对象展开操作符使用三个点 ... 作为前缀，表示将一个对象或数组拆开。
对象展开语法
-- -------------------- ---- ------- ----- --- - - ------ --------- ------ --------- -- ----- ------ - - ------- ------ --------- --
上述代码演示了展开对象的语法。展开操作符 ...obj 意味着将 obj 对象的属性逐个展开并将它们添加到新对象 newObj 的顶层。
数组展开语法
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = [...arr1, ...arr2];
上述代码演示了展开数组的语法。用 ...arr1 和 ...arr2 将两个数组中的元素一一展开，然后将它们合并为一个新的数组。
对象展开操作符的深入理解
对象展开操作符可以执行浅层复制和合并，但需要注意一些限制。
不可枚举属性
使用对象展开操作符时，不可枚举的属性将无法被复制。通常，不可枚举属性是一些内部属性，例如函数原型上的属性。
-- -------------------- ---- ------- ----- ------ - ----------------- ----- ---- - - ------ --------- --------- ---------- -- ----- ---- - - ------- -- ------------------ -- - ------ -------- -
注意，对象 obj2 中不包含 symbol 属性。
对象的更新
使用对象展开操作符时，如果有相同的属性名，则后面的值将覆盖前面的值。
const obj1 = { prop1: "value1", prop2: "value2" };
const obj2 = { prop2: "new value", prop3: "value3" };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { prop1: 'value1', prop2: 'new value', prop3: 'value3' }在新对象 newObj 中，obj1 中的 prop2 属性值被 obj2 中的 prop2 属性值所覆盖。因此，新对象中 prop2 属性的值为 new value。
修改原始对象
当使用对象展开操作符时，不会修改原始对象。展开操作符只是将原始对象的属性复制到新对象中。
const obj1 = { prop1: "value1", prop2: "value2" };
const obj2 = { ...obj1, prop3: "value3" };
console.log(obj1); // { prop1: 'value1', prop2: 'value2' }
console.log(obj2); // { prop1: 'value1', prop2: 'value2', prop3: 'value3' }在上面的代码示例中，原始对象 obj1 保持不变，而 obj2 是一个新对象，它包含 obj1 的复制和添加的属性 prop3。
用例
对象展开操作符可以用于各种用例，例如：
创建新的对象
const obj1 = { prop1: "value1", prop2: "value2" };
const obj2 = { prop3: "value3" };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { prop1: 'value1', prop2: 'value2', prop3: 'value3' }浅层复制对象
const obj1 = { prop1: "value1", prop2: "value2" };
const obj2 = { ...obj1 };
console.log(obj2); // { prop1: 'value1', prop2: 'value2' }更新旧的变量
-- -------------------- ---- ------- --- ----- - - ------ -- ---------- ------- -- ----- -------- - - --------- ------ ----------- - -- -- ----- - --------- ------------------- -- - ------ -- ---------- ------- -
在上面的代码示例中，我们使用对象展开操作符对旧状态进行了浅层复制，并将新值 count 添加到对象中。然后，我们更新了变量 state，使其引用新的复制状态。
总结
对象展开操作符是 ES7 引入的新语法，用于简化对象和数组的创建和合并。该操作符提供了基于对象或数组的浅层复制和合并。通过对象展开操作符，我们可以创建新对象，浅层复制对象，更新旧变量等，从而更方便地执行各种操作。但需要注意，对象展开操作符只执行浅层复制和合并，不能复制不可枚举的属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651dfcbe95b1f8cacd5a8234