在 JavaScript 中，...data 是 展开语法（Spread Syntax），它是 ES6（ECMAScript 2015）引入的特性，主要用于展开可迭代对象（如数组、对象、字符串等）的元素或属性。

1. 基本作用

...data 的作用是 将 data 展开，具体行为取决于它的使用场景：

• 在数组或函数调用中：展开数组或可迭代对象的元素。
• 在对象中：展开对象的可枚举属性。

2. 常见使用场景

(1) 展开数组（Array Spread）

const arr1 = [1, 2, 3];

const arr2 = [...arr1, 4, 5]; // 展开 arr1 的元素

console.log(arr2); // [1, 2, 3, 4, 5]

相当于：

const arr2 = [1, 2, 3, 4, 5];

(2) 函数调用时展开参数（Function Arguments）

function sum(a, b, c) {

return a + b + c;

}

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6，相当于 sum(1, 2, 3)

(3) 复制数组（浅拷贝）

const original = [1, 2, 3];

const copy = [...original]; // 创建新数组，元素相同

console.log(copy); // [1, 2, 3]

console.log(original === copy); // false（不同引用）

(4) 合并数组

const arr1 = [1, 2];

const arr2 = [3, 4];

const merged = [...arr1, ...arr2];

console.log(merged); // [1, 2, 3, 4]

(5) 展开对象（Object Spread）

const obj1 = { a: 1, b: 2 };

const obj2 = { ...obj1, c: 3 }; // 展开 obj1 的属性

console.log(obj2); // { a: 1, b: 2, c: 3 }

注意：如果属性名冲突，后面的会覆盖前面的：

const obj1 = { a: 1, b: 2 };

const obj2 = { ...obj1, a: 99 }; // a 会被覆盖

console.log(obj2); // { a: 99, b: 2 }

(6) 字符串展开

const str = "hello";

const chars = [...str]; // 展开字符串

console.log(chars); // ["h", "e", "l", "l", "o"]

3. 与 ...rest（剩余参数）的区别

... 语法还可以用于 剩余参数（Rest Parameters），但它们的作用相反：

展开语法（Spread）：把数组/对象 展开 成独立的元素/属性。

剩余参数（Rest）：把多个元素/参数 收集 成一个数组。

示例：

// 展开语法（Spread）

const arr = [1, 2, 3];

console.log(...arr); // 1 2 3

// 剩余参数（Rest）

function logArgs(...args) {

console.log(args); // [1, 2, 3]

}

logArgs(1, 2, 3);

4. 注意事项

4.1. 只能用于可迭代对象：

• 数组、字符串、Set、Map 等可迭代对象可以使用 ... 展开。
• 普通对象（{}）在 ES2018 后才支持 ... 展开。

4.2. 浅拷贝（Shallow Copy）：

const obj = { a: { b: 1 } };

const copy = { ...obj };

copy.a.b = 2; // 会影响原对象！

console.log(obj.a.b); // 2

如果对象嵌套较深，需要使用深拷贝（如 JSON.parse(JSON.stringify(obj)) 或 lodash.cloneDeep）。

4.3. 不能直接展开非可迭代对象：

const num = 123;

console.log(...num); // TypeError: num is not iterable

5.总结

好了，爱学习的小伙伴，更多精彩，关注不迷路哟～