介绍
** spread 操作员**是与 ES6 引入的 JavaScript 功能,它允许您访问 iterable 对象的内部。 一个iterable 对象是您可以通过项目对项目进行迭代的任何东西,如数组、对象字符串和字符串。 这些类型的 JavaScript 类型可以以某种序列的方式穿越。 例如,您可以在数组上使用 for 循环,或者在 JavaScript 对象中,您可以使用 for...in 循环。
扩散操作员的基本知识
扩散操作器有效地为您提供这些可迭代对象内的所有项目的访问权限,让我们看看一个示例来说明这意味着什么:
1const foo = [
2 'hello',
3 'bonjour',
4 'konnichiwa'
5];
6const bar = [...foo]; // the three dots "..." are the spread operator syntax.
7
8console.log(bar);
在控制台中运行此功能应打印如下内容:
1[label Output]
2['hello', 'bonjour', 'konnichiwa'];
变量bar获得了变量foo的确切副本,扩散操作器基本上扫描了foo数组的内部部分,并在bar中在新数组中散布了值。
重要的是要注意散布操作员周围的轴承, [...foo].散布操作员在同类的新对象中散布这些值;在这种情况下,数组是字面上的。
1const foo = [
2 'hello',
3 'bonjour',
4 'konnichiwa'
5];
6const bar = ...foo;
7
8console.log(bar);
1[label Output]
2Uncaught SyntaxError: expected expression, got '...'
现在我们有一个基本的想法,让我们看看散布操作员可能有用的常见任务。
重复可迭代的对象
正如我们之前所看到的,扩散操作员是重复可重复对象的最佳方法之一。有更复杂的方式来做到这一点,但扩散操作员的简洁性使其非常容易使用。
1const foo = {
2 english: 'hello',
3 french: 'bonjour',
4 japanese: 'konnichiwa'
5};
6const bar = {...foo};
7console.log(bar);
这就导致了如下:
1[label Output]
2{ english: 'hello', french: 'bonjour', japanese: 'konnichiwa' }
可融合的物体
扩散运算器也可以用来组成一个可重复的对象从其他几个。
1const foo = ['hello', 'bonjour', 'konnichiwa'];
2const bar = ['gutentag', 'saluton'];
3const baz = [...foo, ...bar];
4
5console.log(baz);
这将输出现在baz中包含的foo和bar的内容:
1[label Output]
2['hello', 'bonjour', 'konnichiwa', 'gutentag', 'saluton']
您还可以将一个 ** 散布的** 数组放置在另一个数组中,就像您所做的任何其他项目一样:
1const foo = ['hello', 'bonjour', 'konnichiwa'];
2const bar = [...foo, 'gutentag', 'saluton'];
3
4console.log(bar);
现在‘bar’包含一些对‘foo’的补充:
1[label Output]
2['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']
考虑这一点的一个好方法是,扩散运算器只保留可迭代对象中的项目,而不是对象本身。
对象字母怎么样? 它与合并数组非常相似:
1const foo = {
2 english: 'hello',
3 french: 'bonjour',
4 japanese: 'konnichiwa'
5};
6const bar = {
7 german: 'gutentag',
8 esperanto: 'saluton'
9};
10const baz = {...foo, ...bar};
11
12console.log(baz);
由于两个对象的扩散运算器包含这些对象的内部,所以在新对象的文本背景下使用它们将确保它们也有这些内容。
1[label Output]
2{ english: 'hello', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', esperanto: 'saluton' }
这是 Object.assign()的常见任务,但扩散语法使这更简洁。
<$>[注]
**注:**虽然您可以使用扩散运算器合并不同类型的可迭代对象,但这可能会导致一些不必要的行为。对于数组和字符串,您可以将它们视为对象,其中键是数组中的项目或字母索引(例如: {0: 'a', 1: 'b', 2: 'c'}。如果您在对象字母背景下使用数组或字符串的扩散运算器,您的结果将包含这些密钥/值对。
当有重复钥匙时会发生什么?
1const foo = {
2 english: 'hello',
3 french: 'bonjour',
4 japanese: 'konnichiwa'
5};
6const bar = {
7 english: 'howdy',
8 german: 'gutentag'
9};
10const baz = {
11 ...foo,
12 ...bar,
13 esperanto: 'saluton',
14 korean: 'annyeong'
15};
16
17console.log(baz);
在这里,我们将两个现有对象合并成一个第三个对象,这两个对象都包含一个英语的条目。
1[label Output]
2{ english: 'howdy', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', esperanto: 'saluton', korean: 'annyeong' }
重复键是按它们应用的顺序重写的,重要的是考虑在使用扩散运算器合并可重复对象时是否会丢失有价值的数据。
将论点变成函数
在许多情况下,可以选择使用应用方法,该方法以类似的方式将变量的值传递给函数。
1function calcVolume(width, height, depth) {
2 return width * height * depth;
3};
4
5calcVolume(12, 30, 14); // basic
6
7// Passing arguments to the function from a variable:
8const cube = [12, 30, 14];
9calcVolume.apply(null, cube); // using "apply"
10calcVolume(...cube); // using "spread operator"
扩散运算器使在应用可能不完全适用的情况下,将一系列参数输入函数变得容易。
使用 Strings 的 Spread 操作器
最后,您也可以使用扩散运算器与字符串,因为它们也被认为是可重复的对象。
1const foo = "jumanji";
2const bar = [...foo];
3
4console.log(bar);
这将把字符串jumanji分成其个别字符。
1[label Output]
2// [ "j", "u", "m", "a", "n", "j", "i" ]
结论
扩散操作员是来自其他几种语言(如C++和Python)的高度需求的功能,现在它在ES6中!它使一些常见的编程任务更容易完成,并且通过本教程,您了解了您可以使用的实际方法。