在 JavaScript 的现代开发中，... 运算符已成为不可或缺的语法特性。然而，许多开发者常常混淆它的两种不同用法：扩展运算符（Spread Operator）和剩余形参（Rest Parameters）。本文将深入探讨这两者的区别、用法和应用场景。

什么是扩展运算符？

扩展运算符允许一个可迭代对象（如数组、字符串或Map）在需要多个元素的地方展开。它主要用于"展开"或"分解"集合中的元素。

基本语法： ...iterableObject

扩展运算符的常见用法

1. 数组操作

// 数组合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// 数组复制
const original = [1, 2, 3];
const copy = [...original]; // [1, 2, 3]

// 在特定位置插入元素
const inserted = [0, ...arr1, 4]; // [0, 1, 2, 3, 4]

2. 函数调用

// 替代 apply() 方法
const numbers = [1, 2, 3];
Math.max(...numbers); // 等同于 Math.max(1, 2, 3)

function sum(a, b, c) {
  return a + b + c;
}
sum(...numbers); // 6

3. 对象操作（ES2018引入）

// 对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// 对象浅拷贝
const originalObj = { x: 1, y: 2 };
const copyObj = { ...originalObj }; // { x: 1, y: 2 }

什么是剩余形参？

剩余形参允许我们将不定数量的参数表示为一个数组。它主要用于函数参数定义中，收集多个参数 into 一个数组。

基本语法： function(a, b, ...rest) {}

剩余形参的常见用法

1. 收集函数参数

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}
sum(1, 2, 3, 4); // 10

// 与常规参数结合使用
function concatenate(separator, ...strings) {
  return strings.join(separator);
}
concatenate('-', 'a', 'b', 'c'); // "a-b-c"

2. 解构赋值中的剩余属性

// 数组解构
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

// 对象解构
const { a, b, ...others } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(others); // { c: 3, d: 4 }

实际应用示例

// 合并函数参数与扩展运算符结合使用
function mergeArrays(...arrays) {
  return arrays.reduce((merged, current) => [...merged, ...current], []);
}

const result = mergeArrays([1, 2], [3, 4], [5, 6]);
// result: [1, 2, 3, 4, 5, 6]

// 高级对象操作
function removeProperty(obj, ...propsToRemove) {
  return Object.keys(obj).reduce((newObj, key) => {
    if (!propsToRemove.includes(key)) {
      return { ...newObj, [key]: obj[key] };
    }
    return newObj;
  }, {});
}

const original = { a: 1, b: 2, c: 3, d: 4 };
const filtered = removeProperty(original, 'b', 'd');
// filtered: { a: 1, c: 3 }

注意事项

1. 浏览器兼容性：虽然现代浏览器都支持这两种语法，但在旧版环境中可能需要Babel等转译工具。
2. 性能考虑：对于极大数组或对象，使用扩展运算符可能会影响性能，因为它会创建新的引用。
3. 浅拷贝限制：扩展运算符执行的是浅拷贝，对于嵌套对象需要特别注意。

总结

扩展运算符和剩余形参虽然使用相同的语法（...），但它们在JavaScript中扮演着相反的角色：

• 扩展运算符用于展开元素，将集合分解为单个元素
• 剩余形参用于收集元素，将多个元素合并为数组

理解这两者的区别和正确用法，将帮助你编写更简洁的JavaScript代码，充分利用现代语言的特性提高开发效率和代码可读性。