如果你可以使用展开运算符将数组展开为多个元素,那么肯定有一种方式将多个元素绑定到一个数组中吧?
实际上,的确有!叫做剩余参数,它是 ES6 中新加的另一个运算符。
剩余参数
剩余参数也用三个连续的点 ( … ) 表示,使你能够将不定数量的元素表示为数组。它在多种情形下都比较有用。
一种情形是将变量赋数组值时。例如,
const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);
Prints: 20.17 18.67 1.5 ["cheese", "eggs", "milk", "bread"]
该代码将 order 数组的值分配给单个变量。数组中的前三个值被分配给了 total、subtotal 和 tax,但是需要重点注意的是 items。
通过使用剩余参数,数组中剩余的值(作为数组)被分配给了 items。
可以将剩余参数看着展开运算符的对立面;如果展开运算符是拿出包装盒中的所有物品,那么剩余参数就是将所有物品放回包装盒中。
可变参数函数
剩余参数的另一个用例是处理可变参数函数。可变参数函数是接受不定数量参数的函数。
例如,假设有一个叫做 sum() 的函数,它会计算不定数量的数字的和。在运行期间,如何调用 sum() 函数?
sum(1, 2);
sum(10, 36, 7, 84, 90, 110);
sum(-23, 3000, 575000);
实际上有无数种方式可以调用 sum() 函数。不管传入函数的数字有多少个,应该始终返回数字的总和。
使用参数对象
在之前版本的 JavaScript 中,可以使用参数对象处理这种类型的函数。参数对象是像数组一样的对象,可以当做本地变量在所有函数中使用。它针对传入函数的每个参数都包含一个值,第一个参数从 0 开始,第二个参数为 1,以此类推。
如果我们看看 sum() 函数的实现方法,会发现可以使用参数对象来处理传递给它的各种数字。
function sum() {
let total = 0;
for(const argument of arguments) {
total += argument;
}
return total;
}
现在可以正常运行,但是存在问题:
如果查看 sum() 函数的定义,会发现它没有任何参数。
这容易引起误导,因为我们知道 sum() 函数可以处理不定数量的参数。
难以理解。
如果你从未使用过参数对象,那么看了这段代码后很可能会疑问参数对象来自何处。是不是凭空出现的?看起来肯定是这样。
使用剩余参数
幸运的是,出现剩余参数后,你可以重写 sum() 函数,使其阅读起来更清晰。
function sum(...nums) {
let total = 0;
for(const num of nums) {
total += num;
}
return total;
}
这一版本的 sum() 函数更简练、更易读懂。此外,注意 for…in 循环被替换成了新的 for…of 循环。