📅 最后修改于: 2021-01-01 03:47:35 🧑 作者: Mango
ES6引入了一个称为散布运算符的新运算符符，它由三个点(…)组成。它允许迭代器在预期参数超过零的地方扩展。它赋予我们从数组中获取参数的特权。
传播运算符的语法与rest参数相似，但是完全相反。让我们了解一下散布运算符的语法。
var variablename1 = [...value];
上面语法中的三个点(…)是散布运算符，它针对特定变量中的整个值。
让我们尝试了解散布运算符在不同情况下的用法：
在这里，我们将看到如何使用散布运算符来操纵数组。
当我们使用字面量形式构造数组时，散布运算符允许我们在初始化的数组中插入另一个数组。
例
let colors = ['Red', 'Yellow'];
let newColors = [...colors, 'Violet', 'Orange', 'Green'];
console.log(newColors);
输出量
[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]
Spread运算符还可用于连接两个或多个数组。
例
let colors = ['Red', 'Yellow'];
let newColors = [...colors, 'Violet', 'Orange', 'Green'];
console.log(newColors);
输出量
[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]
我们还可以使用spread运算符复制数组的实例。
例
let colors = ['Red', 'Yellow'];
let newColors = [...colors];
console.log(newColors);
输出量
[ 'Red', 'Yellow' ]
如果我们在不使用spread运算符的情况下复制数组元素，则在复制的数组中插入新元素将影响原始数组。
但是，如果我们使用spread运算符复制数组，则在复制的数组中插入元素不会影响原始数组。
让我们理解相同的插图。
例
不使用传播运算符
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' ]