js中 剩余运算符（Rest Operator ）（...）和展开运算符（Spread Operator）（...）的区别及用法

1、基本说明

在JavaScript中，剩余运算符（Rest Operator）和展开运算符（Spread Operator）虽然在某些方面有相似之处，但它们各自有不同的用途和功能。下面详细解释这两种运算符的区别：

1.1. 剩余运算符（Rest Operator）

剩余运算符是用在函数参数中，用来收集剩余的参数到一个数组中。它使用三个点（...）表示。这在处理不定数量的参数时非常有用。

1.2. 展开运算符（Spread Operator）

展开运算符用于将数组元素或对象的属性“展开”到某个位置，比如在函数调用、数组构造或对象字面量中。它同样使用三个点（...）表示。

我们会发现都是三个点（...）表示。

2、实例说明

剩余运算符（Rest Operator）

function sum(...numbers: any[]): number {
  // 验证输入并过滤非数字类型
  const validatedNumbers = numbers.filter(num => typeof num === 'number');

  // 如果过滤后数组为空，直接返回 0
  if (validatedNumbers.length === 0) {
    return 0;
  }

  // 使用 reduce 计算总和
  return validatedNumbers.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, "2", 3)); // 输出: 4 (过滤掉非数字 "2")
console.log(sum()); // 输出: 0 (无参数)
console.log(sum(null, undefined, NaN, {}, [])); // 输出: 0 (所有参数被过滤)
console.log(sum(10, -5, 3.5)); // 输出: 8.5

在这个例子中，...numbers 收集了所有传递给 sum 函数的参数到一个名为 numbers 的数组中。

展开运算符（Spread Operator）

数组展开：

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

对象展开：

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

3、区别总结

• 剩余运算符（Rest Operator）：用于函数参数中，用来收集多个参数为一个数组。

• 展开运算符（Spread Operator）：用于将数组或对象的元素/属性“展开”到另一个数组或对象中。

4、使用场景

• 使用剩余运算符（Rest Operator）当你需要处理不定数量的参数时。

• 使用展开运算符（Spread Operator）当你需要将一个数组或对象的元素/属性分散到另一个数组或对象中时。

这两种运算符在JavaScript中提供了强大的功能，使得处理数组和对象时更加灵活和方便。