剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
function(a, b, ...theArgs) {
// ...
}
描述
如果函数的最后一个命名参数以...
为前缀,则它将成为一个由剩余参数组成的真数组,其中从0
(包括)到theArgs.length
(排除)的元素由传递给函数的实际参数提供。
在上面的例子中,theArgs
将收集该函数的第三个参数(因为第一个参数被映射到a
,而第二个参数映射到b
)和所有后续参数。
剩余参数和 arguments对象的区别
剩余参数和 arguments
对象之间的区别主要有三个:
从 arguments 到数组
引入了剩余参数来减少由参数引起的样板代码。
// Before rest parameters, "arguments" could be converted to a normal array using:
function f(a, b) {
var normalArray = Array.prototype.slice.call(arguments);
// -- or --
var normalArray = [].slice.call(arguments);
// -- or --
var normalArray = Array.from(arguments);
var first = normalArray.shift(); // OK, gives the first argument
var first = arguments.shift(); // ERROR (arguments is not a normal array)
}
// Now we can easily gain access to a normal array using a rest parameter
function f(...args) {
var normalArray = args;
var first = normalArray.shift(); // OK, gives the first argument
}
解构剩余参数
剩余参数可以被解构,这意味着他们的数据可以被解包到不同的变量中。请参阅解构赋值。
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
属性得到剩余参数的个数:
function fun1(...theArgs) {
alert(theArgs.length);
}
fun1(); // 弹出 "0", 因为theArgs没有元素
fun1(5); // 弹出 "1", 因为theArgs只有一个元素
fun1(5, 6, 7); // 弹出 "3", 因为theArgs有三个元素
下例中,剩余参数包含了从第二个到最后的所有实参,然后用第一个实参依次乘以它们:
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
对象不可以:
function sortRestArgs(...theArgs) {
var sortedArgs = theArgs.sort();
return sortedArgs;
}
alert(sortRestArgs(5,3,7,1)); // 弹出 1,3,5,7
function sortArguments() {
var sortedArgs = arguments.sort();
return sortedArgs; // 不会执行到这里
}
alert(sortArguments(5,3,7,1)); // 抛出TypeError异常:arguments.sort is not a function
为了在arguments
对象上使用Array
方法,它必须首先被转换为一个真正的数组。
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) Function Definitions |
Standard | Initial definition |
ECMAScript (ECMA-262) Function Definitions |
Living Standard |
浏览器兼容
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.