深入理解 JavaScript ES6 Rest 参数：替代 arguments 的最佳实践

JavaScript 参数传递与 arguments 对象的局限

JavaScript 函数支持接收任意数量的参数。与 C# 和 Java 等语言不同，调用 JavaScript 函数时可以传递不定数量的实参。在 ECMAScript 6 之前，JavaScript 通过一个名为 的类数组对象来访问这些未知或可变数量的参数，但它并非真正的数组。请参考以下代码以理解 变量的工作方式：

function add(){
var result = 0; 
for(let i=0;i<arguments.length;i++){
result = result + arguments[i];
}
return result; 
}
var r = add(6,9,3,2);
console.log(r);
var t = add(7,56,9);
console.log(t);

如上所示， 对象用于访问函数中未知或可变数量的参数。尽管 具备 length 属性并支持方括号索引访问，但它并不是真正的 JavaScript 数组。因此，无法对 对象使用 pop、push、slice 等标准数组方法。在使用 时，存在以下主要问题：

首先，JavaScript 函数的 对象不是真正的数组，因此无法使用 pop、push、slice 等数组方法。其次，在内部函数中直接访问外部函数的 对象非常困难。若需访问，必须先将外部函数的 赋值给一个变量，然后在内部函数中引用该变量。

ES6 Rest 参数：优势与基本用法

若希望将 对象当作数组使用，必须通过 Array.prototype.slice 进行手动转换。ECMAScript 6 引入了 （Rest 参数）功能，它将未知数量的参数表示为函数内的一个真实数组。 不仅将额外参数封装为数组，还解决了 对象的诸多缺陷。以下是使用 重写的 add 函数示例：

function add(...theArgs){
var result = 0; 
for(let i=0;i<theArgs.length;i++){
result = result + theArgs[i];
}
return result; 
}
var r = add(6,9,3,2);
console.log(r);
var t = add(7,56,9);
console.log(t);

可以将 定义为 ...theArgs 或 ...args。如果函数最后一个命名参数以 ...（三个点）为前缀，则该参数成为函数的 。JavaScript 函数的 是纯 JavaScript 数组。在上述代码中，...theArgs 是函数 add 的 ，因为它是唯一的命名参数且以 ... 为前缀。

由于 是 JavaScript 数组，因此可以对变量 theArgs 执行 push、pop 等操作，如下面代码所示：

function add(...theArgs){
theArgs.push(10);
var result = 0; 
for(let i=0;i<theArgs.length;i++){
result = result + theArgs[i];
}
var lastItem = theArgs.pop();
console.log(lastItem);
return result; 
}

Rest 参数与其他参数的混合使用

JavaScript 函数的 也可以与其他参数配合使用。如果不想将特定参数包含在 数组中，可以在函数定义中显式声明其他命名参数。请参考以下代码块：

function add(num1, num2, ...theArgs){
console.log(num1);
console.log(num2);
console.log(theArgs.length);
}
var r = add(6,9,3,2);
var t = add(7,56,9);

在第一次函数调用中，6 和 9 分别分配给 num1 和 num2。在第二次函数调用中，7 和 56 被分配给 num1 和 num2。从第三个参数开始的值将被分配给 数组。请注意，前两个参数不会成为 数组的一部分。因此，如果打算将所有值都包含在 中，应在定义时将它们定义为用逗号分隔的命名参数。下面给出的代码会导致错误：

function add(num1, ...theArgs,num2){
console.log(num1);
console.log(num2);
console.log(theArgs.length);
}

在上述代码中， 不是最后一个参数，因此 JavaScript 会抛出错误。 必须是最后一个正式参数。

Rest 参数的解构应用

JavaScript 允许对 进行解构，这意味着可以将 变量数据解包到不同的变量名称中。请看下面的代码：

function add(...[a,b,c]){
return a+b+c; 
}
var r = add(6);
console.log(r);
var t = add(7,56,9);
console.log(t);

在第一次函数调用中，将分配 a = 6，b = undefined，c = undefined。在第二次函数调用中，将分配 a = 7，b = 56，c = 9。在此示例中，函数将忽略传递的任何额外参数。

JavaScript 函数的 是对使用 处理未知参数的重大改进。它是一个纯 JavaScript 数组，因此可以使用所有数组方法。可以将 变量数据解包到命名变量中。可以为 指定任何名称，这也是使用 关键字的一大改进。

英文原文：Easy JavaScript Part 2: What Is the Rest Parameter in a Function?

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。