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

翻譯 | 楊小愛

在本節(jié)教程中，我們將學(xué)習(xí)如何使用 JavaScript 剩余參數(shù)來(lái)收集參數(shù)并將它們?nèi)糠湃胍粋€(gè)數(shù)組中。

JavaScript REST 參數(shù)介紹

ES6 提供了一種名為 rest 參數(shù)的新參數(shù)，其前綴為三個(gè)點(diǎn) (...)。剩余參數(shù)允許我們將不定數(shù)量的參數(shù)表示為數(shù)組。請(qǐng)參閱以下語(yǔ)法：

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

最后一個(gè)參數(shù) (args) 以三個(gè)點(diǎn) (...) 為前綴。它被稱為rest參數(shù)（...args）。

我們傳遞給函數(shù)的所有參數(shù)都將映射到參數(shù)列表。在上面的語(yǔ)法中，第一個(gè)參數(shù)映射到 a，第二個(gè)映射到 b，第三個(gè)、第四個(gè)等將作為數(shù)組存儲(chǔ)在其余參數(shù) args 中。 

例如：

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

args 數(shù)組存儲(chǔ)以下值：

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

如果只傳遞前兩個(gè)參數(shù)，則其余參數(shù)將是一個(gè)空數(shù)組：

fn(1,2);

args將是：

[]

請(qǐng)注意，其余參數(shù)必須出現(xiàn)在參數(shù)列表的末尾。以下代碼將導(dǎo)致錯(cuò)誤：

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

錯(cuò)誤：

SyntaxError: Rest parameter must be last formal parameter

更多 JavaScript 剩余參數(shù)示例

請(qǐng)參見以下示例：

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

腳本的輸出是：

6

在此示例中，args在一個(gè)數(shù)組中。因此，我們可以使用 for..of 循環(huán)遍歷其元素并將它們相加。

假設(shè) sum() 函數(shù)的調(diào)用者可以傳遞具有各種數(shù)據(jù)類型（例如數(shù)字、字符串和布爾值）的參數(shù)，并且我們只想計(jì)算數(shù)字的總數(shù)：

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

以下腳本使用新的 sum() 函數(shù)僅對(duì)數(shù)字參數(shù)求和：

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

輸出：

30

請(qǐng)注意，如果沒有其余參數(shù)，則必須使用函數(shù)的 arguments 對(duì)象。

但是，arguments 對(duì)象本身不是 Array 類型的實(shí)例。因此，我們不能直接使用 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 參數(shù)使代碼更加優(yōu)雅。假設(shè)我們需要根據(jù)特定類型（例如數(shù)字、字符串、布爾值和空值）過濾參數(shù)。以下功能可幫助我們做到這一點(diǎn)：

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

JavaScript 剩余參數(shù)和箭頭函數(shù)

箭頭函數(shù)沒有參數(shù)對(duì)象。因此，如果要向箭頭函數(shù)傳遞一些參數(shù)，則必須使用其余參數(shù)。請(qǐng)參見以下示例：

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() 是一個(gè)箭頭函數(shù)，它接受不定數(shù)量的參數(shù)并將這些參數(shù)連接起來(lái)。

動(dòng)態(tài)函數(shù)中的 JavaScript 剩余參數(shù)

JavaScript 允許我們通過 Function 構(gòu)造函數(shù)創(chuàng)建動(dòng)態(tài)函數(shù)。并且可以在動(dòng)態(tài)函數(shù)中使用 rest 參數(shù)。這是一個(gè)例子：

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

輸出：

[ 1, 2, 3 ]

總結(jié)

在本節(jié)教程中，我們學(xué)習(xí)了如何使用 JavaScript 剩余參數(shù)將不定數(shù)量的參數(shù)表示為數(shù)組。

推薦閱讀

【ES6 教程】第一章 新的ES6語(yǔ)法01—let：使用let關(guān)鍵字聲明塊范圍的變量

【ES6 教程】第一章 新的ES6語(yǔ)法02—var 和 let 的區(qū)別

【ES6 教程】第一章 新的ES6語(yǔ)法03—使用const 關(guān)鍵字定義常量

【ES6 教程】第一章 新的ES6語(yǔ)法04—如何設(shè)置函數(shù)參數(shù)的默認(rèn)值

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)