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

翻譯 | 楊小愛

const odd = [1,3,5];const combined = [2,4,6, ...odd];console.log(combined);

輸出：

[ 2, 4, 6, 1, 3, 5 ]

在此示例中，奇數(shù)數(shù)組前面的三個(gè)點(diǎn) (...) 是展開運(yùn)算符。擴(kuò)展運(yùn)算符 (...) 解包奇數(shù)數(shù)組的元素。

請注意，ES6 還具有三個(gè)點(diǎn) (...)，它是一個(gè)將函數(shù)的所有剩余參數(shù)收集到一個(gè)數(shù)組中的剩余參數(shù)。

function f(a, b, ...args) {  console.log(args);}
f(1, 2, 3, 4, 5);

輸出：

[ 3, 4, 5 ]

在此示例中，其余參數(shù) (...) 將參數(shù) 3、4 和 5 收集到數(shù)組 args 中。所以三個(gè)點(diǎn) (...) 代表擴(kuò)展運(yùn)算符和其余參數(shù)。

以下是主要區(qū)別：

• 擴(kuò)展運(yùn)算符 (...) 解包可迭代對象的元素。

• 其余參數(shù) (...) 將元素打包到一個(gè)數(shù)組中。

其余參數(shù)必須是函數(shù)的最后一個(gè)參數(shù)。但是，展開運(yùn)算符可以在任何地方：

const odd = [1,3,5];const combined = [...odd, 2,4,6];console.log(combined);

輸出：

[ 1, 3, 5, 2, 4, 6 ]

要么

const odd = [1,3,5];const combined = [2,...odd, 4,6];console.log(combined);

輸出：

[ 2, 1, 3, 5, 4, 6 ]

請注意，ES2018 將擴(kuò)展運(yùn)算符擴(kuò)展為對象，這稱為對象擴(kuò)展。

讓我們看一些可以使用擴(kuò)展運(yùn)算符的場景。

JavaScript 擴(kuò)展運(yùn)算符和 apply() 方法

請參閱以下 compare() 函數(shù)比較兩個(gè)數(shù)字：

function compare(a, b) {    return a - b;}

在 ES5 中，要將包含兩個(gè)數(shù)字的數(shù)組傳遞給 compare() 函數(shù)，我們經(jīng)常使用 apply() 方法，如下所示：

let result = compare.apply(null, [1, 2]);console.log(result); // -1

但是，通過使用擴(kuò)展運(yùn)算符，我們可以將包含兩個(gè)數(shù)字的數(shù)組傳遞給 compare() 函數(shù)：

let result = compare(...[1, 2]);console.log(result); // -1

擴(kuò)展運(yùn)算符將數(shù)組的元素展開，因此，在這種情況下 a 為 1，b 為 2。

使用 Array 的 push() 方法示例的更好方法

有時(shí)，一個(gè)函數(shù)可能接受不定數(shù)量的參數(shù)。從數(shù)組中填充參數(shù)并不方便。

例如，數(shù)組對象的 push() 方法允許我們向數(shù)組添加一個(gè)或多個(gè)元素。如果要將數(shù)組傳遞給 push() 方法，則需要使用 apply() 方法，如下所示：

let rivers = ['Nile', 'Ganges', 'Yangte'];let moreRivers = ['Danube', 'Amazon'];
[].push.apply(rivers, moreRivers);console.log(rivers);

這個(gè)解決方案看起來很冗長。

以下示例使用擴(kuò)展運(yùn)算符來提高代碼的可讀性：

rivers.push(...moreRivers);

如上所見，使用擴(kuò)展運(yùn)算符要干凈得多。

JavaScript 擴(kuò)展運(yùn)算符和數(shù)組操作

1) 構(gòu)造數(shù)組字面量

擴(kuò)展運(yùn)算符允許我們在使用文字形式構(gòu)造數(shù)組時(shí)將另一個(gè)數(shù)組插入到初始化的數(shù)組中。請參見以下示例：

let initialChars = ['A', 'B'];let chars = [...initialChars, 'C', 'D'];console.log(chars); // ["A", "B", "C", "D"]

2) 連接數(shù)組

此外，我們可以使用擴(kuò)展運(yùn)算符連接兩個(gè)或多個(gè)數(shù)組：

let numbers = [1, 2];let moreNumbers = [3, 4];let allNumbers = [...numbers, ...moreNumbers];console.log(allNumbers); // [1, 2, 3, 4]

3) 復(fù)制數(shù)組

此外，我們可以使用擴(kuò)展運(yùn)算符復(fù)制數(shù)組實(shí)例：

let scores = [80, 70, 90];let copiedScores = [...scores];console.log(copiedScores); // [80, 70, 90]

請注意，擴(kuò)展運(yùn)算符僅將數(shù)組本身復(fù)制到新數(shù)組，而不是元素。這意味著副本是淺的，而不是深的。

JavaScript 擴(kuò)展運(yùn)算符和字符串

考慮以下示例：

let chars = ['A', ...'BC', 'D'];console.log(chars); // ["A", "B", "C", "D"]

在此示例中，我們從單個(gè)字符串構(gòu)造了 chars 數(shù)組。當(dāng)我們將擴(kuò)展運(yùn)算符應(yīng)用于“BC”字符串時(shí)，它將字符串“BC”的每個(gè)單獨(dú)的字符展開為單獨(dú)的字符。

總結(jié)

• 擴(kuò)展運(yùn)算符由三個(gè)點(diǎn) (...) 表示。

• 擴(kuò)展運(yùn)算符將可迭代對象（如數(shù)組、集合和映射）的元素解包到列表中。

• 其余參數(shù)也用三個(gè)點(diǎn) (…) 表示。但是，它將函數(shù)的剩余參數(shù)打包到一個(gè)數(shù)組中。

• 擴(kuò)展運(yùn)算符可用于克隆可迭代對象或?qū)⒖傻鷮ο蠛喜橐粋€(gè)。

今天的內(nèi)容，你學(xué)會了嗎？

推薦閱讀

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

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

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

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

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

請點(diǎn)擊下方公眾號