展开语法（...）是一种将数组或对象展开成单独元素（或键值对）的简便方式。

• 数组：将数组的每个元素展开。
• 对象：将对象的每个键值对展开。

语法

// 数组展开
const arr = [1, 2, 3];
const newArr = [...arr]; // [1, 2, 3]

// 对象展开
const obj = { a: 1, b: 2 };
const newObj = { ...obj }; // { a: 1, b: 2 }

用途

数组用途

复制数组

创建一个数组的浅拷贝，避免直接引用同一数组。

const arr = [1, 2, 3];
const copy = [...arr];
copy.push(4);
console.log(arr);  // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]

合并数组

合并多个数组成一个新数组。

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]

在数组中插入元素

插入新的元素，同时保留原数组元素。

const arr = [1, 2, 3];
const newArr = [0, ...arr, 4];
console.log(newArr); // [0, 1, 2, 3, 4]

传递参数给函数

展开数组元素作为函数的参数。

const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 3

对象的用途

复制对象

创建一个对象的浅拷贝。

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

合并对象

• 合并多个对象成一个新对象。

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

添加或覆盖属性

• 添加新属性或覆盖现有属性。

const obj = { a: 1, b: 2 };
const newObj = { ...obj, b: 3, c: 4 };
console.log(newObj); // { a: 1, b: 3, c: 4 }

对象解构时的剩余属性（Rest Properties）

• 提取对象中部分属性，剩余的放到新对象中。

const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj;
console.log(a);   // 1
console.log(rest); // { b: 2, c: 3 }

注意事项

浅拷贝

使用展开语法复制数组或对象时，仅进行浅拷贝。

const obj = { nested: { key: "value" } };
const copy = { ...obj };
copy.nested.key = "newValue";
console.log(obj.nested.key); // "newValue" （原对象受影响）

对象属性覆盖

当多个对象有相同的属性时，后面的对象属性会覆盖前面的属性。

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

展开非可迭代对象会报错

只有可迭代对象（如数组、字符串、Map、Set 等）才能用于数组的展开语法。

console.log([...123]); // TypeError: 123 is not iterable