ES6 数字

ES6 扩展运算符

ES6 引入了一种称为扩展的新运算符运算符，由三个点(...) 组成。它允许可迭代对象在预期参数超过零的地方进行扩展。它给了我们从数组中获取参数的特权。

Spread 运算符的语法与 rest 参数类似，但完全相反。让我们了解展开运算符的语法。

var variablename1 = [...value];

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

让我们尝试了解扩展运算符在不同案例:

扩展运算符和数组操作

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

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

示例

let colors = ['Red', 'Yellow'];
let newColors = [...colors, 'Violet', 'Orange', 'Green'];
console.log(newColors);

输出

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

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

示例

let colors = ['Red', 'Yellow'];
let newColors = [...colors, 'Violet', 'Orange', 'Green'];
console.log(newColors);

输出

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

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

示例

let colors = ['Red', 'Yellow'];
let newColors = [...colors];
console.log(newColors);

输出

[ 'Red', 'Yellow' ]

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

但如果我们使用扩展运算符复制数组，那么在复制的数组中插入一个元素不会影响到原来的数组。

我们来理解一下这个例子。

例子

不使用扩展运算符

let colors = ['Red', 'Yellow'];
let newColors = colors;
newColors.push('Green');
console.log(newColors);
console.log(colors);

输出

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

使用扩展运算符

let colors = ['Red', 'Yellow'];
let newColors = [...colors];
newColors.push('Green');
console.log(newColors);
console.log(colors);

输出

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

注意: 展开运算符只将数组本身复制到新数组，而不是元素。这意味着操作员可以做浅拷贝而不是深拷贝。

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

示例

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

let str = ['A', ...'EIO', 'U'];
console.log(str);

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

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

输出

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

ES6 循环

ES6 数字