通过4个实际示例了解点差运算符。
它是什么样子的? 三点:...
它有什么作用? 扩展运算符允许在需要多个元素/变量/参数的地方扩展表达式。
无聊的东西闪开,让我们来看看一堆例子来更好地理解什么赫克蔓延运营商实际上是。
- 创建一个名为middle的数组
- 创建第二个包含中间数组的数组
- 注销结果
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