展开运算符

Source: Dev.to

使用展开运算符合并数组

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];

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

展开运算符会将 array1 和 array2 的元素展开到一个新数组中，从而生成一个合并后的列表，并且不会改变原始数组。

使用展开运算符合并对象

属性覆盖规则

合并对象时，后面的（最右侧）对象的属性会覆盖前面对象中相同键的属性。

const obj1 = { name: "Alice", age: 30 };
const obj2 = { city: "New York", age: 35 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);
// Output: { name: "Alice", age: 35, city: "New York" }

在此示例中，obj2 的 age 替代了 obj1 的 age。

浅拷贝行为

展开运算符创建的是 浅 拷贝。嵌套对象仍然是对原始对象的引用。

const obj1 = { name: "Alice", details: { hobby: "reading" } };
const obj2 = { city: "New York", details: { hobby: "hiking" } };

const mergedObj = { ...obj1, ...obj2 };

mergedObj.details.hobby = "painting";

console.log(obj1.details.hobby); // Output: "painting"

在 mergedObj 中修改嵌套属性也会影响 obj1，因为嵌套对象没有被深度克隆。

示例：合并用户对象

const user1 = {
  name: "John",
  age: 40,
  admin: true,
};

const user2 = {
  name: "Dow",
  age: 35,
};

const mergedUser = {
  ...user1,
  ...user2,
};

console.log(mergedUser);
// Output: { name: 'Dow', age: 35, admin: true }

这里，user2 的 name 和 age 覆盖了 user1 中对应的属性，而 user1 的 admin 标志则被保留下来。

注意： 展开运算符在合并数组和对象时非常简洁，但其浅拷贝的特性意味着嵌套结构仍然与原始对象相连。若需要深度合并，请考虑使用 Object.assign（配合手动递归）或诸如 lodash.merge 之类的实用库。