Pressidian

Appearance

在 JavaScript 中，扩展运算符（...） 是 ES6 引入的语法，用于将可迭代对象（如数组、字符串、Set、Map 等）“展开”为独立的元素，或用于收集多个元素为一个数组。它的灵活性使其在多种场景中非常实用。

1. 展开可迭代对象（拆分为单个元素） ​

将数组、字符串等可迭代对象拆分为独立元素，常用于合并、传递参数等场景。

示例 1：数组合并

javascript
const arr1 = [1, 2];
const arr2 = [3, 4];

// 合并数组（替代 concat()）
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]

// 在中间插入元素
const withExtra = [0, ...arr1, 2.5, ...arr2, 5];
console.log(withExtra); // [0, 1, 2, 2.5, 3, 4, 5]

示例 2：字符串拆分为字符

javascript
const str = "hello";
const chars = [...str];
console.log(chars); // ["h", "e", "l", "l", "o"]

示例 3：传递函数参数

javascript
const numbers = [1, 2, 3];

// 传统方式：apply() 传递数组参数
Math.max.apply(null, numbers); // 3

// 扩展运算符：更简洁
Math.max(...numbers); // 3（等价于 Math.max(1, 2, 3)）

示例 4：处理 Set 等可迭代对象

javascript
const set = new Set([1, 2, 2, 3]); // Set 自动去重
const arrFromSet = [...set]; // 转为数组 [1, 2, 3]

2. 收集剩余元素（合并为数组） ​

在函数参数、数组解构中，用于将多个元素“收集”为一个数组，称为剩余参数。

示例 1：函数剩余参数

javascript
// 收集除前两个参数外的所有参数为数组
function sum(first, second, ...rest) {
  console.log(rest); // 剩余参数组成的数组
  return first + second + rest.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3, 4, 5); // 1+2+3+4+5=15，rest 为 [3,4,5]

示例 2：数组解构中的剩余元素

javascript
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]（收集剩余元素）

3. 浅拷贝对象或数组 ​

扩展运算符可用于快速创建数组或对象的浅拷贝（类似 Object.assign()）。

示例 1：浅拷贝数组

javascript
const original = [1, 2, [3, 4]];
const copy = [...original]; // 浅拷贝

// 修改表层元素不影响原数组
copy[0] = 100;
console.log(original[0]); // 1（原数组不变）

// 修改嵌套数组会影响原数组（浅拷贝特性）
copy[2][0] = 300;
console.log(original[2][0]); // 300（原数组的嵌套元素被修改）

示例 2：浅拷贝对象

javascript
const obj = { a: 1, b: { c: 2 } };
const objCopy = { ...obj }; // 浅拷贝对象

objCopy.a = 100;
console.log(obj.a); // 1（原对象不变）

objCopy.b.c = 200;
console.log(obj.b.c); // 200（嵌套对象共享引用）

二、扩展运算符与 apply 的对比 ​

在 ES6 之前，传递数组作为函数参数需要用 Function.prototype.apply()，扩展运算符使其更简洁：

javascript
const arr = [10, 20, 30];

// 传统方式
Math.min.apply(null, arr); // 10

// 扩展运算符
Math.min(...arr); // 10（更直观）

三、注意事项 ​

  1. 仅适用于可迭代对象：扩展运算符只能作用于可迭代对象（如数组、字符串、Set），不能直接用于普通对象（但对象属性展开是特殊语法，见示例 2）。
  2. 浅拷贝限制：对于嵌套的引用类型（对象、数组），扩展运算符仅复制引用，修改会影响原数据。
  3. 不能单独用于函数参数之外的场景：例如 const a = ...[1,2,3]; 是错误的，必须在数组、对象或函数参数中使用。

总结 ​

扩展运算符（...）是 JavaScript 中非常灵活的语法，主要用途包括：

  • 展开可迭代对象（合并数组、拆分字符串、传递参数）；
  • 收集剩余元素（函数剩余参数、数组解构）；
  • 快速浅拷贝数组或对象。

它简化了许多常见操作的语法，使代码更简洁易懂，是现代 JavaScript 开发中的常用特性。