如何使用展开运算符合并对象或数组？

推荐答案

在 JavaScript 中，展开运算符（...）可以用于合并对象或数组。以下是使用展开运算符合并对象和数组的示例：

合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];

console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]

合并对象

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj2 };

console.log(mergedObject); // 输出: { a: 1, b: 2, c: 3, d: 4 }

本题详细解读

展开运算符的作用

展开运算符（...）是 ES6 引入的一个语法特性，它可以将数组或对象展开为单个元素或属性。在合并数组或对象时，展开运算符非常有用。

合并数组

当使用展开运算符合并数组时，它会将两个或多个数组的元素展开，并放入一个新的数组中。例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];

在这个例子中，...arr1 将 arr1 中的元素展开为 1, 2, 3，...arr2 将 arr2 中的元素展开为 4, 5, 6，然后将它们合并到一个新的数组 mergedArray 中。

合并对象

当使用展开运算符合并对象时，它会将两个或多个对象的属性展开，并放入一个新的对象中。如果对象中有相同的属性名，后面的对象属性会覆盖前面的对象属性。例如：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };

在这个例子中，...obj1 将 obj1 的属性展开为 { a: 1, b: 2 }，...obj2 将 obj2 的属性展开为 { b: 3, c: 4 }，然后将它们合并到一个新的对象 mergedObject 中。由于 obj2 中的 b 属性会覆盖 obj1 中的 b 属性，最终结果为 { a: 1, b: 3, c: 4 }。

注意事项

• 展开运算符只能用于可迭代对象（如数组）或对象字面量。
• 在合并对象时，如果存在相同的属性名，后面的对象属性会覆盖前面的对象属性。
• 展开运算符是浅拷贝，对于嵌套的对象或数组，只会复制引用，不会进行深拷贝。