JavaScript Rest 参数的终极指南

摘要：在本教程中，您将学习如何使用 JavaScript rest 参数来收集参数并将它们全部放入一个数组中。

JavaScript rest 参数介绍

ES6 提供了一种新的参数类型，称为 rest 参数，其前缀为三个点 (...)。rest 参数允许您将无限数量的参数表示为一个数组。请参见以下语法

function fn(a,b,...args) {
   //...
}Code language: JavaScript (javascript)

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

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

fn(1, 2, 3, "A", "B", "C");Code language: JavaScript (javascript)

args 数组存储以下值

[3,'A','B','C']Code language: JSON / JSON with Comments (json)

如果您只传递前两个参数，则 rest 参数将是一个空数组

fn(1,2);

args 将是

[]Code language: JSON / JSON with Comments (json)

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

function fn(a,...rest, b) {
 // error
}Code language: JavaScript (javascript)

错误

SyntaxError: Rest parameter must be last formal parameterCode language: JavaScript (javascript)

更多 JavaScript rest 参数示例

请参见以下示例

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

sum(1, 2, 3);Code language: JavaScript (javascript)

脚本的输出是

在此示例中，args 是一个数组。因此，您可以使用for..of 循环来遍历其元素并将其加起来。

假设sum() 函数的调用者可能会传递各种数据类型的参数，例如数字、字符串和布尔值，并且您想计算仅数字的总和

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

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

let result = sum(10,'Hi',null,undefined,20); 
console.log(result);Code language: JavaScript (javascript)

输出

请注意，如果没有 rest 参数，您必须使用函数的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;
    });
}
Code language: JavaScript (javascript)

如您所见，rest 参数使代码更加优雅。假设您需要根据特定类型（例如数字、字符串、布尔值和空值）过滤参数。以下函数可以帮助您完成此操作

function filterBy(type, ...args) {
  return args.filter(function (e) {
    return typeof e === type;
  });
}Code language: JavaScript (javascript)

JavaScript rest 参数和箭头函数

箭头函数没有arguments 对象。因此，如果您想将一些参数传递给箭头函数，则必须使用 rest 参数。请参见以下示例

const combine = (...args) => {
  return args.reduce(function (prev, curr) {
    return prev + ' ' + curr;
  });
};

let message = combine('JavaScript', 'Rest', 'Parameters'); // =>
console.log(message); // JavaScript Rest ParametersCode language: JavaScript (javascript)

输出

JavaScript Rest Parameters

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

JavaScript rest 参数在动态函数中

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

var showNumbers = new Function('...numbers', 'console.log(numbers)');
showNumbers(1, 2, 3);Code language: PHP (php)

输出

[ 1, 2, 3 ]Code language: JSON / JSON with Comments (json)

在本教程中，您学习了如何使用 JavaScript rest 参数来将无限数量的参数表示为一个数组。

本教程对您有帮助吗？