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

翻译 | 杨小爱

在本教程中，我们将了解学习 JavaScript 扩展运算符，该运算符扩展可迭代对象的元素。

JavaScript 扩展运算符简介

ES6 提供了一个名为扩展运算符的新运算符，它由三个点 (...) 组成。扩展运算符允许我们扩展可迭代对象的元素，例如数组、映射或集合。例如：


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

输出：


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

在此示例中，奇数数组前面的三个点 (...) 是展开运算符。扩展运算符 (...) 解包奇数数组的元素。

请注意，ES6 还具有三个点 (...)，它是一个将函数的所有剩余参数收集到一个数组中的剩余参数。


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

输出：


[ 3, 4, 5 ]

在此示例中，其余参数 (...) 将参数 3、4 和 5 收集到数组 args 中。所以三个点 (...) 代表扩展运算符和其余参数。

以下是主要区别：

扩展运算符 (...) 解包可迭代对象的元素。
其余参数 (...) 将元素打包到一个数组中。

其余参数必须是函数的最后一个参数。但是，展开运算符可以在任何地方：


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 将扩展运算符扩展为对象，这称为对象扩展。

让我们看一些可以使用扩展运算符的场景。

JavaScript 扩展运算符和 apply() 方法

请参阅以下 compare() 函数比较两个数字：


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

在 ES5 中，要将包含两个数字的数组传递给 compare() 函数，我们经常使用 apply() 方法，如下所示：


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

但是，通过使用扩展运算符，我们可以将包含两个数字的数组传递给 compare() 函数：


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

扩展运算符将数组的元素展开，因此，在这种情况下 a 为 1，b 为 2。

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

有时，一个函数可能接受不定数量的参数。从数组中填充参数并不方便。

例如，数组对象的 push() 方法允许我们向数组添加一个或多个元素。如果要将数组传递给 push() 方法，则需要使用 apply() 方法，如下所示：


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

这个解决方案看起来很冗长。

以下示例使用扩展运算符来提高代码的可读性：


rivers.push(...moreRivers);

如上所见，使用扩展运算符要干净得多。

JavaScript 扩展运算符和数组操作

1) 构造数组字面量

扩展运算符允许我们在使用文字形式构造数组时将另一个数组插入到初始化的数组中。请参见以下示例：


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

2) 连接数组

此外，我们可以使用扩展运算符连接两个或多个数组：


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

3) 复制数组

此外，我们可以使用扩展运算符复制数组实例：


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

请注意，扩展运算符仅将数组本身复制到新数组，而不是元素。这意味着副本是浅的，而不是深的。

JavaScript 扩展运算符和字符串

考虑以下示例：


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

在此示例中，我们从单个字符串构造了 chars 数组。当我们将扩展运算符应用于“BC”字符串时，它将字符串“BC”的每个单独的字符展开为单独的字符。

总结

扩展运算符由三个点 (...) 表示。
扩展运算符将可迭代对象（如数组、集合和映射）的元素解包到列表中。
其余参数也用三个点 (…) 表示。但是，它将函数的剩余参数打包到一个数组中。
扩展运算符可用于克隆可迭代对象或将可迭代对象合并为一个。

今天的内容，你学会了吗？

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

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

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

【ES6 教程】第一章新的ES6语法06—JavaScript 扩展运算符

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

【ES6 教程】第一章 新的ES6语法06—JavaScript 扩展运算符

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

【ES6 教程】第一章新的ES6语法06—JavaScript 扩展运算符

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