ES2015/ES6中的扩展语法与Rest参数

Question

我对ES2015中的扩展语法和rest参数感到困惑。谁能用恰当的例子解释它们之间的区别？

Answer 1

在javascript中，…被重载。它根据操作员的使用位置执行不同的操作：

1. 在函数声明/表达式的函数参数中使用时，它会将其余参数转换为数组。此变体称为Rest参数语法。

Rest参数语法：

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

Answer 2

ES6有三个新功能点…

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

1. 作为Rest/收集/收集

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展开，以便将其所有元素添加到其他

内部JavaScript执行以下操作

var other = [1, 2].concat(params);

希望这能有所帮助。

Answer 3

使用“扩展”时，将单个变量扩展为多个变量：

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];