博客站

剩余运算符（Rest Operator）和扩展运算符（Spread Operator）在 JavaScript 中都使用 ... 符号，但它们的用途和功能不同。

剩余运算符（Rest Operator）

剩余运算符用于将多个元素合并为一个数组，通常用在函数参数或解构赋值中。

1. 函数参数

在函数定义时，剩余运算符可以将多个参数收集到一个数组中。

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出: 10

2. 解构赋值

在解构赋值中，剩余运算符可以将剩余的元素放入一个数组。

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]

扩展运算符（Spread Operator）

扩展运算符用于将数组或对象展开为多个元素，通常用于数组、函数调用或对象字面量中。

1. 数组

扩展运算符可以将数组展开为多个元素。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]

2. 函数调用

扩展运算符可以将数组展开为函数的参数。

function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(add(...numbers)); // 输出: 6

3. 对象

扩展运算符可以将对象展开为多个属性。

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

总结

• 剩余运算符：将多个元素合并为一个数组，用于函数参数或解构赋值。
• 扩展运算符：将数组或对象展开为多个元素，用于数组、函数调用或对象字面量。

两者虽然使用相同的符号 ...，但功能相反。