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

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);
脚本的输出是:

6
在此示例中,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);
输出:

30
请注意,如果没有其余参数,则必须使用函数的 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 ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值