JavaScript 展开运算符详解

什么是展开运算符？
展开运算符 ...item 的作用是将对象 item 的所有属性"展开"为一个新对象，从而在不修改原对象的前提下，创建一个包含其所有属性的新对象。这种用法在 JavaScript 中非常常见，尤其是在处理对象和数组时。
1. 展开对象的属性
当使用 ...item 时，JavaScript 会将 item 对象的所有可枚举属性复制到新对象中。例如，如果 item 是 { a: 1, b: 2 }，那么 ...item 会生成一个新对象 { a: 1, b: 2 }。这种用法可以避免手动复制属性，使代码更简洁。

const item = { a: 1, b: 2 };
const newItem = { ...item };
console.log(newItem); // { a: 1, b: 2 }

2. 合并对象
展开运算符常用于合并多个对象。例如，你可以将多个对象的属性合并到一个新对象中：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 2 }

在这个例子中，...obj1 和 ...obj2 依次将 obj1 和 obj2 的属性合并到新对象中。

3. 在数组方法中使用
展开运算符也可以用于数组方法，例如 map、filter、reduce 等。在这些场景中，...item 通常用于创建一个新数组，其中包含对原数组元素的修改或扩展。例如：

const list = [
  { date: '2023-10-01', checked: false },
  { date: '2023-10-02', checked: false }
];

const dayList = list.map(item => ({
  ...item,
  checked: this.dateDay === item.date
}));

在这个例子中，...item 用于复制 item 对象的所有属性，并添加一个新的 checked 属性，该属性的值取决于 item.date 是否等于 this.dateDay。这种方式可以避免直接修改原数组，而是返回一个新的数组。

4. 函数参数展开
   在函数调用中，展开运算符可以将数组或对象展开为独立的参数。例如：

function add(a, b, c) {
  console.log(a + b + c);
}

const numbers = [1, 2, 3];
add(...numbers); // 等价于 add(1, 2, 3)

在这个例子中，...numbers 将数组 numbers 展开为三个独立的参数，传递给 add 函数。

5. 解构赋值
   展开运算符还可以用于解构赋值，从对象或数组中提取值。例如：

const person = { name: 'Alice', age: 30 };
const { name, ...rest } = person;
console.log(name); // 输出: Alice
console.log(rest); // 输出: { age: 30 }

在这个例子中，...rest 用于将 person 对象中除了 name 之外的所有属性提取到 rest 对象中。

总结
展开运算符 ... 是 JavaScript 中非常强大的工具，它不仅可以用于对象和数组的合并，还可以用于函数调用、解构赋值等多种场景。通过合理使用展开运算符，可以简化代码，提高代码的可读性和可维护性。

https://metaso.cn/s/mSR6yYK