运算符 ...

ES6 引入了一个新的运算符 ... ，通常称为 spread 或 rest（展开或收集）运算符，取决于它在哪 / 如何使用。我们来看一下：

function foo(x,y,z) {

    console.log( x, y, z );

}

foo( ...[1,2,3] ); // 1 2 3

当 ... 用在数组之前时，它会把这个变量“展开”为各个独立的值。

我们通常看到的是前面代码片段中的使用方式，即把一个数组展开为一组函数调用的参数。在这种用法中， ... 为我们提供了可以替代 apply(..) 方法的一个简单的语法形式，在前 ES6 中我们常常这样写：

foo.apply( null, [1,2,3] ); // 1 2 3

然而， ... 也可以在其他上下文中用来展开 / 扩展一个值，比如在另一个数组声明中：

var a = [2,3,4];

var b = [ 1, ...a, 5 ];

console.log( b ); // [1,2,3,4,5]

在这种用法中， ... 基本上代替了 concat(..) ，这里的行为就像是 [1].concat( a, [5] ) 。

... 的另外一种常见用法基本上可以被看作反向的行为；与把一个值展开不同， ... 把一系列值收集到一起成为一个数组。考虑：

function foo(x, y, ...z) {

    console.log( x, y, z );

}

foo( 1, 2, 3, 4, 5 ); // 1 2 [3,4,5]

在这段代码中， ...z 基本上是在说：“把剩下的参数（如果有的话）收集到一起组成一个名为 z 的数组。”因为 x 赋值为 1 ， y 赋值为 2 ，所以其余的参数 3 、 4 和 5 被收集到数组 z 中。

当然，如果没有命名参数的话， ... 就会收集所有的参数：

function foo(...args) {

    console.log( args );

}

foo( 1, 2, 3, 4, 5); // [1,2,3,4,5]

foo(..) 函数声明中的 ...args 通常称为“rest 参数”，因为这里是在收集其余的参数。我喜欢用“收集”这个词，因为这更好地描述了它的行为而不是它的内容。

这种用法最好的一点是，它为弃用很久的 arguments 数组——实际上它并不是真正的数组，而是类似数组的对象——提供了一个非常可靠的替代形式。因为 args （或者随便你给它起什么名字——很多人喜欢用 r 或 rest ）是一个真正的数组，前 ES6 中有很多技巧用来把 arguments 转变为某种我们可以当作数组来使用的东西，现在我们可以摆脱这些愚蠢的技巧了。

好了，今天的文章就到这里，本文由Web前端精髓为您提供，喜欢的同学记得点击收藏或者点赞哦！