ECMAScript/ES6 Rest参数

精华

小牛编辑

174浏览

2023-03-14

在ECMAScript 2015或ES6中引入了rest参数，从而提高了处理参数的能力。 rest参数允许将无限数量的参数表示为数组。通过使用rest参数，可以使用任意数量的参数调用函数。

在ES6之前，使用了函数的arguments对象。 arguments对象不是Array类型的实例。因此，不能直接使用filter()方法。

rest参数以三个点(...)为前缀。尽管rest参数的语法类似于扩展运算符，但与扩展运算符完全相反。 rest参数必须是最后一个参数，因为它用于将所有剩余元素收集到一个数组中。

function fun(a, b, ...theArgs) {  
  // statements  
}

示例

function show(...args) {  
  let sum = 0;  
  for (let i of args) {  
      sum += i;  
  }  
  console.log("Sum = "+sum);  
}  

show(10, 20, 30);

执行上面示例代码，得到以下结果：

Sum = 60

在函数中传递的所有参数都将映射到参数列表。如上所述，rest parameter(...)应该始终位于参数列表的最后。如果将其放置在其他任何地方，将导致错误。

具有以下语法的rest参数将导致错误。

function show(a,...rest, b) {  
  // error  
 };

1. Rest parameter和arguments对象的区别

rest parameter和arguments对象彼此不同。看看rest parameter和arguments对象之间的区别：

arguments对象是类似数组的(但不是array)，而其余参数是数组实例。 arguments对象不包含诸如：sort，map，forEach或pop之类的方法，但是这些方法可以直接用于rest parameter中。

2.reset parameter和解构

重构意味着将复杂的结构分解为更简单的部分。可以将数组定义为rest参数。传入的参数将分解为数组。 Rest parameter仅支持数组解构。

通过使用rest parameter，可以将数组的所有剩余元素放入新数组中。

下面来看一个相同的例子。

var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];    

// destructuring assignment    
var [a,b,...args] = colors;    
console.log(a);     
console.log(b);     
console.log(args);

执行上面示例代码，得到一下结果：

Violet
Indigo
[ 'Blue', 'Green', 'Yellow', 'Orange', 'Red' ]

3.动态函数reset parameter

JavaScript允许使用函数构造函数创建动态函数，可以在动态函数中使用reset parameter。

let num = new Function('...args','return args');  
console.log(num(10, 20, 30));

执行上面示例代码，得到以下结果：

[ 10, 20, 30 ]