通过四个例子理解JavaScript拓展运算符

原文地址：JavaScript & The spread operator

拓展运算符看起来像什么？ 三个点，...
它能做什么？ 拓展运算符允许一个表达式在某个地方展开成为多个元素、变量或参数

定义看上去毫无乐趣，下面通过几个例子理解到底什么是拓展运算符。

初识

• 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在创建的时候把middle插入到arr数组的中间，此时arr数组里面包了一个数组middle。

如果我们的目标是两个数组，那上面的做法很不错，但如果我们只想要一个数组呢？

我们可以通过拓展运算符实现。再提一次，拓展运算符允许数组的元素展开。来看下面的代码，除了使用了拓展运算符，代码和上面的没啥区别：

var middle = [3, 4];
var arr = [1, 2, ...middle, 4, 5];

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

还记得刚才读到的拓展运算符的定义吗？上面的代码发挥了拓展运算符的作用，正如你看的，我们创建了数组arr，然后对middle使用了拓展运算符，此时，middle数组并没有直接插入到arr中，而是被展开了。middle数组中的每一个元素插入到了arr数组中。此时，arr不再是嵌套数组，而是一个从1到6的简单数组。

1、Slice

slice是JavaScript中数组方法，允许我们拷贝数组。同样，我们可以使用拓展运算符来拷贝数组。

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']

现在你可能会说，这也work了，和上面的结果一样啊。

然后，这只是看起来一样，但是本质是完全不同。我们并没有让arr2的值和arr中每个值相同，而是直接让两个数组相等，这也就意味着任何对arr2的修改都是影响arr。

arr2.push('d');

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

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

正如你亲眼所见，即使没有明确的向源数组arr添加新值，新值d依然会添加到arr中。

2、Concat

使用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中。

注：原文评论中有人指出使用拓展运算符连接数组可能并不高效。在测试中，使用拓展运算符要比concat慢一些。对大数组的处理，使用拓展运算符可能并不理想。

3、Math

Math函数可以与拓展运算符结合使用，我们以Math.max()为例。

简单介绍一下，Math.max()返回一组数字中的最大值。

Math.max();
// -Infinity

Math.max(1, 2, 3);
// 3

Math.max(100, 3, 4);
// 100

如果没有拓展运算符，我们也可以借助.apply()通过Math.max()求数组中的最大值：

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));
// 8

这是让人讨厌的实现。

现在，我们来看通过拓展运算符如何实现。代码更加简洁：

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

console.log(max);
// 8

4、String to Array

将字符串转成数组有很多种方法，比如slice、split等，使用拓展运算符会更加简单：

var str = "hello";
var chars = [...str];

console.log(chars); 
// ['h', 'e',' l',' l', 'o']

很酷吧，拓展运算符会遍历str中的每个字符，然后分配到chars新数组中。