ES2015/ES6中的Spread语法与Rest参数

Question

我对ES2015中的spread语法和rest参数感到困惑.任何人都能用适当的例子来解释它们之间的区别吗？

Answer 1

使用spread时,您将单个变量扩展为更多:

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;

Answer 2

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);

希望这可以帮助.

Answer 3

摘要：

在javascript ...中超载。它根据使用运算符的位置执行不同的操作：

1. 当在函数声明/表达式的函数参数中使用时，它将把剩余的参数转换成数组。此变体称为Rest参数语法。
2. 在其他情况下，它将在期望零个或多个参数（函数调用）或元素（数组文字）的地方散布iterable的值。此变体称为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);

传播语法：

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);

Answer 4

Javascript 的三点 ( ...) 运算符可以以两种不同的方式使用：

1. 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"]

2. 扩展运算符：允许将迭代器（数组/对象/字符串）扩展为单个参数/元素。

var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"]; 
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

请注意，展开运算符可以是第一个元素，但剩余参数需要是最后一个以收集其余元素。

Answer 5

当我们在代码中看到"..."时,它是rest参数或spread运算符.

有一种简单的方法来区分它们:

当...位于函数参数的末尾时,它是"休息参数"并将列表的其余部分收集到数组中.当...发生在函数调用或类似函数中时,它被称为"扩展运算符"并将数组扩展到列表中.使用模式:

Rest参数用于创建接受任意数量参数的函数.spread运算符用于将数组传递给通常需要许多参数列表的函数.它们一起帮助轻松地在列表和参数数组之间移动.有关此的更多信息,请单击此处