前言
但在本文中，我将讨论剩余运算符 ( ... )，它看起来与展开运算符相似，但用途不同。我们将看到这两个运算符有何不同。
展开运算符
展开运算符 ( ... ) 用于传播对象的属性。例如，您可以这样做。
const obj = {
a: 1,
b: 2,
c: 3
};
const newObj = {
...obj
};
console.log(newObj);
// { a: 1, b: 2, c: 3 }
newObj 对象具有 obj 对象的所有属性。这是因为展开运算符 ( ... ) 用于展开 obj 对象的属性。
顾名思义，展开运算符将一个对象的属性“展开”到另一个对象。
它的另一个用例是在调用函数时扩展函数参数。例如，
const arr = [1, 2, 3];
const sum = (a, b, c) => a + b + c;
console.log(sum(...arr)); // Outputs: 6
// ^
// sum(1, 2, 3)
展开运算符 ( ... ) 用于将数组元素展开到函数参数。因此， sum() 函数将接收数组元素作为函数参数。
剩余运算符
另一方面，
剩余运算符 (
...) 用于将函数参数收集到数组中。因此，它与展开运算符相反。
例如，
const sum = (...args) => {
return args.reduce((acc, curr) => acc + curr, 0);
// ^
// [1, 2, 3]
};
console.log(sum(1, 2, 3));
// 6
剩余运算符 ( ... ) 用于将函数参数收集到一个数组中。因此， sum() 函数将以数组形式接收函数参数。
您还可以使用 rest 运算符来收集函数的剩余参数。例如
const sum = (a, b, ...restOfArguments) => {
return a + b + restOfArguments.reduce((acc, curr) => acc + curr, 0);
// ^ ^ ^
// 1 2 [3, 4, 5]
};
console.log(sum(1, 2, 3, 4, 5));
// 15
剩余运算符 ( ... ) 用于将 sum() 函数的剩余参数收集到一个数组中。因此， sum() 函数将接收剩余的参数作为一个数组 ( restOfArguments )，您可以使用它来循环。
Caveats
rest 运算符有一些注意事项。您只能将它用作函数的最后一个参数。例如
const sum = (a, b, ...restOfArguments, c) => {
return a + b + restOfArguments.reduce((acc, curr) => acc + curr, 0) + c;
};
console.log(sum(1, 2, 3, 4, 5, 6));
// SyntaxError: Rest 参数必须是最后一个
此外， 不能在一个函数中使用多个剩余运算符。例如，
const sum = (a, b, ...restOfArguments, ...restOfArguments2) => {
return a + b + restOfArguments.reduce((acc, curr) => acc + curr, 0) + restOfArguments2.reduce((acc, curr) => acc + curr, 0);
};
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9));
结论
在本文中，我们看到了展开运算符 ( ... ) 和剩余运算符 ( ... ) 在视觉上的区别。我们还看到了如何在 JavaScript 中使用它们。
全文完
谢谢！
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 25 天
