英文 | https://www.javascripttutorial.net

翻译 | 杨小爱

在本节教程中，我们将学习如何使用 JavaScript 剩余参数来收集参数并将它们全部放入一个数组中。

JavaScript REST 参数介绍

ES6 提供了一种名为 rest 参数的新参数，其前缀为三个点 (...)。剩余参数允许我们将不定数量的参数表示为数组。请参阅以下语法：


function fn(a,b,...args) {   //...}

最后一个参数 (args) 以三个点 (...) 为前缀。它被称为rest参数（...args）。

我们传递给函数的所有参数都将映射到参数列表。在上面的语法中，第一个参数映射到 a，第二个映射到 b，第三个、第四个等将作为数组存储在其余参数 args 中。

例如：


fn(1, 2, 3, "A", "B", "C");

args 数组存储以下值：


[3,'A','B','C']

如果只传递前两个参数，则其余参数将是一个空数组：


fn(1,2);

args将是：

[]

请注意，其余参数必须出现在参数列表的末尾。以下代码将导致错误：


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

错误：


SyntaxError: Rest parameter must be last formal parameter

更多 JavaScript 剩余参数示例

请参见以下示例：


function sum(...args) {    let total = 0;    for (const a of args) {        total += a;    }    return total;}
sum(1, 2, 3);

脚本的输出是：

在此示例中，args在一个数组中。因此，我们可以使用 for..of 循环遍历其元素并将它们相加。

假设 sum() 函数的调用者可以传递具有各种数据类型（例如数字、字符串和布尔值）的参数，并且我们只想计算数字的总数：


function sum(...args) {  return args    .filter(function (e) {      return typeof e === 'number';    })    .reduce(function (prev, curr) {      return prev + curr;    });}

以下脚本使用新的 sum() 函数仅对数字参数求和：


let result = sum(10,'Hi',null,undefined,20); console.log(result);

输出：

请注意，如果没有其余参数，则必须使用函数的 arguments 对象。

但是，arguments 对象本身不是 Array 类型的实例。因此，我们不能直接使用 filter() 方法。在 ES5 中，我们必须使用 Array.prototype.filter.call() 如下：


function sum() {  return Array.prototype.filter    .call(arguments, function (e) {      return typeof e === 'number';    })    .reduce(function (prev, curr) {      return prev + curr;    });}

如上所见，rest 参数使代码更加优雅。假设我们需要根据特定类型（例如数字、字符串、布尔值和空值）过滤参数。以下功能可帮助我们做到这一点：


function filterBy(type, ...args) {  return args.filter(function (e) {    return typeof e === type;  });}

JavaScript 剩余参数和箭头函数

箭头函数没有参数对象。因此，如果要向箭头函数传递一些参数，则必须使用其余参数。请参见以下示例：


const combine = (...args) => {  return args.reduce(function (prev, curr) {    return prev + ' ' + curr;  });};
let message = combine('JavaScript', 'Rest', 'Parameters'); // =>console.log(message); // JavaScript Rest Parameters

输出：


JavaScript Rest Parameters

combine() 是一个箭头函数，它接受不定数量的参数并将这些参数连接起来。

动态函数中的 JavaScript 剩余参数

JavaScript 允许我们通过 Function 构造函数创建动态函数。并且可以在动态函数中使用 rest 参数。这是一个例子：


var showNumbers = new Function('...numbers', 'console.log(numbers)');showNumbers(1, 2, 3);

输出：


[ 1, 2, 3 ]

总结

在本节教程中，我们学习了如何使用 JavaScript 剩余参数将不定数量的参数表示为数组。

【ES6 教程】第一章新的ES6语法02—var 和 let 的区别

【ES6 教程】第一章新的ES6语法03—使用const 关键字定义常量

【ES6 教程】第一章新的ES6语法04—如何设置函数参数的默认值

【ES6 教程】第一章新的ES6语法05—REST 参数以及如何有效地使用它们

学习更多技能
请点击下方公众号

【ES6 教程】第一章 新的ES6语法05—REST 参数以及如何有效地使用它们

学习更多技能请点击下方公众号

【ES6 教程】第一章新的ES6语法05—REST 参数以及如何有效地使用它们

学习更多技能
请点击下方公众号