JavaScript 展开运算符的实际用法

摘要: 本教程将介绍 JavaScript 展开运算符，它可以将可迭代对象的元素展开。

JavaScript 展开运算符简介

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

const odd = [1,3,5];
const combined = [2,4,6, ...odd];
console.log(combined);Code language: JavaScript (javascript)

输出

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

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

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

function f(a, b, ...args) {
	console.log(args);
}

f(1, 2, 3, 4, 5);
Code language: JavaScript (javascript)

输出

[ 3, 4, 5 ]Code language: JSON / JSON with Comments (json)

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

以下是主要区别

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

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

const odd = [1,3,5];
const combined = [...odd, 2,4,6];
console.log(combined);Code language: JavaScript (javascript)

输出

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

或者

const odd = [1,3,5];
const combined = [2,...odd, 4,6];
console.log(combined);Code language: JavaScript (javascript)

输出

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

请注意，ES2018 将展开运算符扩展到对象，这被称为对象展开。

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

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

请参见以下 compare() 函数，它比较两个数字

function compare(a, b) {
    return a - b;
}Code language: JavaScript (javascript)

在 ES5 中，要将两个数字的数组传递给 compare() 函数，您通常使用 apply() 方法，如下所示

let result = compare.apply(null, [1, 2]);
console.log(result); // -1Code language: JavaScript (javascript)

但是，通过使用展开运算符，您可以将两个数字的数组传递给 compare() 函数

let result = compare(...[1, 2]);
console.log(result); // -1Code language: JavaScript (javascript)

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

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

有时，函数可以接受无限个参数。从数组填充参数并不方便。

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

let rivers = ['Nile', 'Ganges', 'Yangte'];
let moreRivers = ['Danube', 'Amazon'];

[].push.apply(rivers, moreRivers);
console.log(rivers);Code language: JavaScript (javascript)

此解决方案看起来很冗长。

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

rivers.push(...moreRivers);Code language: CSS (css)

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

JavaScript 展开运算符和数组操作

1) 构建数组文字

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

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

2) 连接数组

此外，您可以使用展开运算符连接两个或多个数组

let numbers = [1, 2];
let moreNumbers = [3, 4];
let allNumbers = [...numbers, ...moreNumbers];
console.log(allNumbers); // [1, 2, 3, 4]Code language: JavaScript (javascript)

3) 复制数组

此外，您可以使用展开运算符复制数组实例

let scores = [80, 70, 90];
let copiedScores = [...scores];
console.log(copiedScores); // [80, 70, 90]Code language: JavaScript (javascript)

请注意，展开运算符只会将数组本身复制到新数组中，而不会复制元素。这意味着副本是浅层副本，而不是深层副本。

JavaScript 展开运算符和字符串

考虑以下示例

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

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

总结

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

本教程对您有帮助吗？