通过四个例子理解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新数组中。
