首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

rest parameters

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

语法

代码语言:javascript
复制
function f(a, b, ...theArgs) {
  // ...
}

描述

如果函数的最后一个命名参数以...为前缀,则它将成为一个数组,其中从0(包括)到theArgs.length(排除)的元素由传递给函数的实际参数提供。

在上面的例子中,theArgs将收集该函数的第三个参数(因为第一个参数被映射到a,而第二个参数映射到b)和所有后续参数。

剩余参数和?arguments对象的区别

剩余参数和?arguments对象之间的区别主要有三个:

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。

  • arguments对象不是一个真正的数组,而剩余参数是真正的?Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如?sortmapforEachpop

  • arguments对象还有一些附加的属性?(如callee属性)。

从 arguments?到数组

引入了剩余参数来减少由参数引起的样板代码。

代码语言:javascript
复制
// Before rest parameters, the following could be found:
function f(a, b) {
  var args = Array.prototype.slice.call(arguments, f.length);

  // …
}

// to be equivalent of

function f(a, b, ...args) {
  
}

解构剩余参数

剩余参数可以被解构,这意味着他们的数据可以被解包到不同的变量中。请参阅解构赋值

代码语言:javascript
复制
function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

示例

因为theArgs是个数组,所以你可以使用length属性得到剩余参数的个数:

代码语言:javascript
复制
function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1();  // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

下例中,剩余参数包含了从第二个到最后的所有实参,然后用第一个实参依次乘以它们:

代码语言:javascript
复制
function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element;
  });
}

var arr = multiply(2, 1, 2, 3); 
console.log(arr); // [2, 4, 6]

下例演示了你可以在剩余参数上使用任意的数组方法,而arguments对象不可以:

代码语言:javascript
复制
function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}

console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7

function sortArguments() {
  var sortedArgs = arguments.sort(); 
  return sortedArgs; // this will never happen
}

// throws a TypeError: arguments.sort is not a function
console.log(sortArguments(5, 3, 7, 1));

为了在arguments对象上使用Array方法,它必须首先被转换为一个真正的数组。

代码语言:javascript
复制
function sortArguments() {
  var args = Array.prototype.slice.call(arguments);
? var sortedArgs = args.sort();
? return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // shows 1, 3, 5, 7

规范

Specification

Status

Comment

ECMAScript 2015 (6th Edition, ECMA-262)The definition of 'Function Definitions' in that specification.

Standard

Initial definition

ECMAScript Latest Draft (ECMA-262)The definition of 'Function Definitions' in that specification.

Living Standard

?

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

47

20 (12.10240)

15.0 (15.0)

No support

34

10

Destructuring

49

No support

52.0 (52.0)

No support

36

?

Feature

Android Webview

Chrome for Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

47

47

20 (12.10240)

15.0 (15.0)

No support

34

No support

Destructuring

49

49

No support

52.0 (52.0)

?

36

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com