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中提供了强大的功能，使得处理数组和对象时更加灵活和方便。
