我对 ES2015 中的 spread 语法和 rest 参数感到困惑。任何人都可以用适当的例子解释它们之间的区别吗？
ES2015 / ES6 中的Spread语法与Rest参数
IT技术
javascript
ecmascript-6
variadic-functions
spread-syntax
rest-parameters
2021-01-28 03:42:18
6个回答
使用传播时，您将单个变量扩展为更多：
var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];使用 rest 参数时，您将一个函数的所有剩余参数折叠到一个数组中：
function sum( first, ...others ) {
for ( var i = 0; i < others.length; i++ )
first += others[i];
return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;ES6 新特性三点 ...
以下是我们如何使用这些点：
- 作为休息/收藏家/聚会
var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]
这...m是一个收集器，它收集其余的参数。当我们在内部编写时：
var [c, ...m] = [1,2,3,4,5];
JavaScript 执行以下操作
var c = 1,
m = [2, 3, 4, 5];
- 作为传播
var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]
在这里，...params扩展以将其所有元素添加到other
JavaScript 在内部执行以下操作
var other = [1, 2].concat(params);
希望这可以帮助。
概括：
在 javascript 中...是重载的。它根据使用运算符的位置执行不同的操作：
- 当在函数声明/表达式的函数参数中使用时，它会将剩余的参数转换为数组。此变体称为Rest 参数语法。
- 在其他情况下，它将在需要零个或多个参数（函数调用）或元素（数组文字）的地方散布可迭代对象的值。这种变体称为Spread语法。
例子：
其余参数语法：
function rest(first, second, ...remainder) {
console.log(remainder);
}
// 3, 4 ,5 are the remaining parameters and will be
// merged together in to an array called remainder
rest(1, 2, 3, 4, 5);传播语法：
// example from MDN:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
// the numbers array will be spread over the
// x y z parameters in the sum function
console.log(sum(...numbers));
// the numbers array is spread out in the array literal
// before the elements 4 and 5 are added
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers);当我们在代码中看到“...”时，它要么是其余参数，要么是展开运算符。
有一个简单的方法来区分它们：
当 ... 位于函数参数的末尾时，它是“其余参数”并将列表的其余部分收集到数组中。当 ... 出现在函数调用或类似函数中时，它被称为“扩展运算符”并将数组扩展到列表中。使用模式：
其余参数用于创建接受任意数量参数的函数。展开运算符用于将数组传递给通常需要许多参数列表的函数。它们一起有助于轻松地在列表和参数数组之间移动。有关此的更多信息，请单击此处
Javascript 的三个点 ( ...) 运算符可以以两种不同的方式使用：
- Rest 参数：将所有剩余元素收集到一个数组中。
var days = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
const [sat, sun, ...weekdays] = days;
console.log(sat); // "Sat"
console.log(sun); // "Sun"
console.log(weekdays); // ["Mon", "Tue", "Wed", "Thu", "Fri"]- 展开运算符：允许将可迭代对象（数组/对象/字符串）扩展为单个参数/元素。
var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"];
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]请注意，扩展运算符可以是第一个元素，但rest 参数需要是最后一个以收集其余元素。