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

Question

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

Answer 1

使用传播时，您将单个变量扩展为更多：

 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 新特性三点...

以下是我们如何使用这些点：

1. 作为休息/收藏家/聚会

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

2. 作为传播

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. 在其他情况下，它将在需要零个或多个参数（函数调用）或元素（数组文字）的地方散布可迭代对象的值。 这种变体称为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 // xyz 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

当我们在代码中看到“...”时，它要么是其余参数，要么是展开运算符。

有一个简单的方法来区分它们：

当 ... 位于函数参数的末尾时，它是“其余参数”并将列表的其余部分收集到数组中。 当 ... 出现在函数调用或类似情况中时，它被称为“扩展运算符”并将数组扩展到列表中。 使用模式：

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

Answer 5

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

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

Answer 6

基本上就像在 Python 中一样：

>>> def func(first, *others):
...    return [first, *others]
>>> func('a', 'b', 'c')
['a', 'b', 'c']

Answer 7

在 ES6 中添加了这三个点...有两个含义，Spread 运算符和 Rest 参数

展开运算符：您使用三个点来扩展iterables ， iterables我的意思是arrays 、 string等。作为参数。 例如Math.max()函数需要不确定数量的参数，因此您可以使用 Spread 运算符将元素扩展为Math.max()函数的参数。 这里有一个来自mdn的例子

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

var array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

另一个用例是添加，例如拥有这个数组

const videoGames = ['mario galaxy', 'zelda wind waker', 'ico'];

您可以将其添加到另一个数组

const favoritesVideoGames = ['Shadow of the colosus', ...videoGames];

那么favoritesVideoGames值是

[ 'Shadow of the colosus', 'mario galaxy', 'zelda wind waker', 'ico' ]

关于Rest参数，这里是MDN定义

其余参数语法允许我们将无限数量的参数表示为一个数组。

这意味着您可以将许多元素打包成一个元素

这里有一个来自 MDN 的例子

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

我通常对这三点感到困惑， @stephaniecodes 的这个 插图帮助我记住了它的逻辑。 我提到我从这个插图中获得灵感来回答这个问题。

我希望它有用。

Answer 8

关于这一点， 我无法理解我们如何在 javascript 中传递函数并返回参数

函数是一组指令，它接受一些输入并处理它们并返回结果。

这里我们有一个数组 [1, 2, 3, 4, 5, 6]，过滤器函数迭代每个元素并将每个元素传递给正函数，如果它是偶数则返回数字，否则跳过它。

痕迹：

1 => Filter(1) => positive(1) => skips 1,
2 => Filter(2) => positive(2) => returns 2,
3 => Filter(3) => positive(3) => skips 3,
...
6 => Filter(6) => positive(6) => returns 6

因此结果 [2, 4, 6]

Answer 9

考虑3种情况

1] 不使用任何运算符

function add(x, y) {
  return x + y;
}

add(1, 2, 3, 4, 5) // returns 3  (function will takes first 2 arg only)

2] 与休息运算符

function add(...args) {
  let result = 0;

  for (let arg of args) result += arg;

  return result
}

add(1) // returns 1
add(1,2) // returns 3
add(1, 2, 3, 4, 5) // returns 15

- 我们可以将任意数量的参数收集到一个数组中

3] 使用扩展运算符

const arr = ["Joy", "Wangari", "Warugu"];
const newArr = ["joykare", ...arr];

The value of newArr will be [ 'joykare', 'Joy', 'Wangari', 'Warugu' ]

另一个

function add(a, b, c) {
  return a + b + c ;
}
const args = [1, 2, 3];

add(...args);

-We have been using arrays to demonstrate the spread operator, 
but any iterable also works. So, if we had a 
string const str = 'joykare', [...str] translates to [ 'j', 'o', 'y', 'k', 'a', 'r', 'e' ]

Answer 10

来自：Ved Antani，Stoyan Stefanov 着作“面向对象的 JavaScript - 第三版”。 ：

休息参数

ES6引入了rest参数。 其余参数允许我们以数组的形式向函数发送任意数量的参数。 rest参数只能是参数列表中的最后一个，并且只能有一个rest参数。 在最后一个形参之前放置一个rest operator(...)表示该参数是一个 rest 参数。 以下示例显示在最后一个形参之前添加一个休息运算符：

function sayThings(tone, ...quotes){ 
  console.log(Array.isArray(quotes)); //true 
  console.log(`In ${tone} voice, I say ${quotes}`) 
} 
sayThings("Morgan Freeman","Something serious"," 
 Imploding Universe"," Amen"); 
//In Morgan Freeman voice, I say Something serious,
 Imploding Universe,Amen 

传递给函数的第一个参数以音调接收，而其余参数作为数组接收。 可变参数 (var-args) 已成为其他几种语言的一部分，也是ES6的受欢迎版本。 其余参数可以替换略有争议的参数变量。 其余参数和参数变量之间的主要区别在于，其余参数是实数组。 所有数组方法都可用于剩余参数。

点差运算符

扩展运算符看起来与休息运算符完全相同，但执行的功能完全相反。 在调用函数或定义数组时提供参数时使用扩展运算符。 展开运算符接受一个数组并将其元素拆分为单个变量。 以下示例说明了扩展运算符如何在调用将数组作为参数的函数时提供更清晰的语法：

function sumAll(a,b,c){ 
  return a+b+c 
} 
var numbers = [6,7,8] 
//ES5 way of passing array as an argument of a function 
console.log(sumAll.apply(null,numbers)); //21 
//ES6 Spread operator 
console.log(sumAll(...numbers))//21 

Answer 11

简单好记…………

如果三个点 (...) 在左侧是其 Rest 参数，如果三个点在右侧是它的 Spread 参数。

const [a,b,...c] = [1,2,3,4,5]     // (left) rest

const [d,e] = [1, ...c]             // (right) spread