JavaScript和点差运算符

通过4个实际示例了解点差运算符。

得到它？ 它正在展开翅膀..通过不飞溅

它是什么样子的？ 三点：...

它有什么作用？ 扩展运算符允许在需要多个元素/变量/参数的地方扩展表达式。

无聊的东西闪开，让我们来看看一堆例子来更好地理解什么赫克蔓延运营商实际上是。

1. 创建一个名为middle的数组
2. 创建第二个包含中间数组的数组
3. 注销结果

var middle = [3, 4]; var arr = [1, 2, middle, 5, 6]; console.log(arr); // [1, 2, [3, 4], 5, 6]

上面， 我们不使用传播运算符。 这样，创建arr数组时，中间数组将作为数组内的数组插入到arr数组的中间。

如果那是目标，那很好，但是如果我们只想要一个数组怎么办？

我们可以使用传播算子。 再次，散布运算符允许我们数组的元素展开 。 看一下下面的代码，所有内容都是一样的–除了我们使用了散布运算符：

var middle = [3, 4]; var arr = [1, 2, ...middle, 5, 6]; console.log(arr); // [1, 2, 3, 4, 5, 6]

还记得上面刚刚阅读的扩展运算符定义吗？ 这就是发挥作用的地方。 如您所见，当我们创建arr数组并在中间数组上使用spread运算符时，中间数组将展开 ，而不仅仅是插入。 中间数组中的每个元素都插入到arr数组中。 这意味着我们没有嵌套的数组，而是剩下一个简单的数字数组，范围从1到6。

切片

slice（）是一个JavaScript Array方法，允许我们复制数组。 以类似的方式，我们可以使用传播运算符来复制数组：

var arr = ['a', 'b', 'c']; var arr2 = [...arr]; console.log(arr2); // ['a', 'b', 'c']

瞧！ 我们有一个复制的数组。 将arr中的数组值扩展为单个字母，然后将其分配给arr2。 现在，我们可以随意更改arr2数组，而不会对原始arr数组造成任何影响。

同样，之所以起作用，是因为将arr的值扩展为填充我们的arr2数组定义的括号。 因此，我们将arr2设置为等于arr的值，而不是arr本身。 如果我们看看没有传播算子的情况，那么这个想法可能更有意义。

如果我们简单地创建一个数组，然后将另一个数组设置为与其相等，则其外观将如下所示：

var arr = ['a', 'b', 'c']; var arr2 = arr; console.log(arr2); // ['a', 'b', 'c']

现在，您可能会说，“行得通”。 看起来和上面一样！

尽管外观可能相同，但实际上却有很大不同。 而不是创建副本并将arr2分配给每个arr值，我们实际上所做的是将arr2设置为等于整个arr数组。 这意味着我们对arr2所做的任何操作也会影响原始的arr数组。

arr2.push('d'); console.log(arr2); // ['a', 'b', 'c', 'd'] console.log(arr2); // ['a', 'b', 'c', 'd'] console.log(arr); // ['a', 'b', 'c', 'd'] console.log(arr); // ['a', 'b', 'c', 'd']

如您所见，即使我们没有将新值显式添加到原始arr中，我们的新值d仍被推到arr数组的末尾。

康卡特

除了使用concat（）来连接数组之外，我们还可以使用传播运算符。 首先，让我们看看使用concat（）会是什么样子

var arr = ['a', 'b', 'c']; var arr2 = ['d', 'e', 'f']; arr1 = arr.concat(arr2); console.log(arr); // ['a', 'b', 'c', 'd', 'e', 'f']

现在，让我们使用传播运算符：

var arr = ['a', 'b', 'c']; var arr2 = ['d', 'e', 'f']; arr = [...arr, ...arr2]; console.log(arr); // ['a', 'b', 'c', 'd', 'e', 'f']

完全一样的结果！ 每个数组都展开以允许在新的arr中设置数组值。

数学

我们还可以将数学函数与传播运算符结合使用。 在此示例中，我们将使用Math.max（）

如果您不熟悉，Math.max（）将返回零个或多个数字中的最大值：

Math.max(); // -Infinity Math.max(); // -Infinity Math.max(1, 2, 3); // 3 Math.max(1, 2, 3); // 3 Math.max(100, 3, 4); // 100 Math.max(100, 3, 4); // 100

没有散​​布运算符，在数组上使用Math.max（）的最简单方法是使用.apply（）

var arr = [2, 4, 8, 6, 0]; function max(arr) { return Math.max.apply(null, arr); } function max(arr) { return Math.max.apply(null, arr); } console.log(max(arr)); // 8 console.log(max(arr)); // 8

是的，真的很烦人。

现在来看一下我们如何使用散布运算符执行相同的操作。 无需创建函数并利用apply方法返回Math.max（）的结果，我们只需要两行代码：

var arr = [2, 4, 8, 6, 0]; var max = Math.max(...arr); console.log(max); // 8

字符串到数组

奖励示例：使用传播运算符可简单地将字符串转换为字符数组

var str = "hello"; var chars = [...str]; console.log(chars); // ['h', 'e',' l',' l', 'o']

太酷了吧？ 扩展运算符遍历str字符串中的每个字符，并将其分配给我们的新chars数组。

❤如果这个帖子有帮助，请打动一下！ 并且不要忘了查看我最近的其他文章（并在Twitter上关注我）

• JavaScript：面向初学者的关键字
• JavaScript：初学者的模板文字和标记功能
• 当您准备好真正学习 Web开发时，请查看学习全栈Web开发的5个最佳课程

From: https://hackernoon.com/javascript-the-spread-operator-a867a71668ca