ES6 扩展运算符

ES6 引入了一个新的运算符，称为扩展运算符，它由三个点 (...) 组成。它允许可迭代对象在需要多于零个参数的位置展开。它使我们有权从数组中获取参数。

扩展运算符的语法与剩余参数相似，但它与剩余参数完全相反。 让我们了解一下扩展运算符的语法。

语法

上面语法中的三个点 (...) 是扩展运算符，它针对特定变量中的所有值。

让我们尝试了解扩展运算符在不同情况下的用法

扩展运算符和数组操作

在这里，我们将看到如何使用扩展运算符来操作数组。

构造数组字面量

当我们使用字面量形式构造数组时，扩展运算符允许我们在初始化的数组中插入另一个数组。

示例

输出

[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]

连接数组

扩展运算符还可以用于连接两个或多个数组。

示例

输出

[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]

复制数组

我们还可以使用扩展运算符复制数组的实例。

示例

输出

[ 'Red', 'Yellow' ]

如果我们不使用扩展运算符复制数组元素，则向复制的数组中插入新元素会影响原始数组。

但是，如果我们通过使用扩展运算符复制数组，则在复制的数组中插入元素不会影响原始数组。

让我们了解一下相同的说明。

示例

不使用扩展运算符

输出

[ 'Red', 'Yellow', 'Green' ]
[ 'Red', 'Yellow', 'Green' ]

使用扩展运算符

输出

[ 'Red', 'Yellow', 'Green' ]
[ 'Red', 'Yellow' ]

注意：扩展运算符仅将数组本身复制到新的数组，而不是复制元素。 这意味着该运算符可以进行浅拷贝，而不是深拷贝。

扩展运算符和字符串

让我们看看扩展运算符如何扩展字符串。 下面给出了相同的说明。

示例

在这里，我们从单独的字符串构造了一个数组 str 。

在上面的示例中，我们已将扩展运算符应用于字符串 'EIO'。 它将 'EIO' 字符串的每个特定字符展开为单个字符。

执行上述代码后，我们将获得以下输出。

输出

[ 'A', 'E', 'I', 'O', 'U' ]