ES6/ES2015 对 Javascript 语言进行了重大升级。它引入了许多不同的新功能。其中之一就是我们可以用在任何兼容容器（对象、数组、字符串、集合、映射）前面的三个连续点。这使我们能够编写更加优雅和简洁的代码。本文将会使用最常见的例子来解释这三个点
三个点具有两个含义：展开运算符（spread operator）和 剩余运算符（rest operator）
展开运算符
展开运算符允许迭代器在接收器内部分别展开或扩展。
迭代器和接收器可以是任何可以循环的对象，例如数组、对象、集合、映射等。
你可以把一个容器的每个部分分别放入另一个容器。
const arr = ['axtlive',...anotherArr];
剩余运算符
剩余参数语法允许我们将无限数量的参数表示为数组，命名参数的位置可以在剩余参数之前。
const func = (first,second,...rest) => {};
使用示例
数组示例
- 复制数组
当我们需要修改一个数组，但又不想改变原数组（因为其他地方可能会使用到原数组），因此我们必须进行数组的复制。
const arr = ['Vue','React','Angular'];
const copyArr = [...arr]; // ['Vue','React','Angular'];
console.log(arr === copyArr); // false
它可以选择数组（arr）里面的每个元素，并把每个元素放到新的数据结构（copyArr）中。
当然我们也可以使用老的数组方法 map 来实现数组的复制并进行身份映射。
arr.map(item => item);
- 唯一数组
如果我们想从数组里筛选出重复的元素，最简单的解决方案是什么？
Set 对象里面存储的都是唯一的元素，并且可以用数组填充。同时它也具有迭代接口，则我们可以把它展开到新的数组中去，得到的数组中的值就是唯一的。
const fruits = ['apple', 'orange', 'banana', 'banana'];
const uniqueFruits = [...new Set(fruits)]; // ['apple', 'orange', 'banana'];
// old way
fruits.filter((fruit, index, arr) => arr.indexOf(fruit) === index);
- 串联数组
我们可以使用 concat 方法来连接两个独立的数组，那同样的也可以使用展开运算符呀！
const fruits = ['apple', 'orange', 'banana'];
const vegetables = ['carrot'];
const fruitsAndVegetables = [...fruits, ...vegetables]; // ['apple', 'orange', 'banana', 'carrot']
const fruitsAndVegetables = ['carrot', ...fruits]; // ['carrot', 'apple', 'orange', 'banana']
// old way
const fruitsAndVegetables = fruits.concat(vegetables);
fruits.unshift('carrot');
- 将参数作为数组进行传递
当传递参数时，展开运算符可以使我们的代码更具可读性。
在 ES6 之前，我们必须把函数应用于 arguments 。
如今我们可以把参数展开到函数中，使得代码更加简洁。
const mixer = (x,y,z) => console.log(x,y,z);
const fruits = ['apple', 'orange', 'banana'];
mixer(...fruits); // 'apple', 'orange', 'banana'
// old way
mixer.apply(null, fruits);
- 数组切割
如果有需要，使用展开运算符可以实现数组的切割，但是必须一个个的去命名剩余的元素，如果数组过大，这并不是一个好的方式。
使用 slice 方法切割更加直接。
const fruits = ['apple', 'orange', 'banana'];
const [apple, ...remainingFruits] = fruits; // ['orange', 'banana']
// old way
const remainingFruits = fruits.slice(1);
- 将参数转换为数组
Javascript 中的参数是类似数组的对象。
你可以用索引来访问它，但是不能调用像 map、filter 这样的数组方法。
参数是一个可迭代的对象，那么我们做些什么呢？在它们前面放三个点，然后作为数组去访问！
const func = (...args) => console.log(args);
func('React'); // ['React'];
- 将 NodeList 转换为数组
参数就像从 querySelectorAll 函数返回的 NodeList 一样。
它们的行为也有点像数组，只是没有对应的方法。
[...document.querySelectorAll('div')];
// old way
Array.prototype.slice.call(document.querySelectorAll('div'));
对象示例
- 复制对象
复制对象和复制数组的工作方式相同。
在这之前你也可以使用 Object.assign 和一个空对象来实现对象的复制。
const info = {name:'axtlive'};
const copyInfo = {...info}; // {name:'axtlive'}
console.log(info = copyInfo); // false
// old way
const copyInfo = Object.assign({},info)
- 合并对象
合并的唯一区别是具有相同键的属性将被覆盖。
最右边的属性具有最高优先级。
const info1 = {name:'axtlive'};
const info2 = {age:23};
const info3 = {look:'cool'};
const infoOfMe = {...info1,...info2,...info3}; // {name:'axtlive',age:23,look:'cool'}
// old way
Object.assigin({},info1,info2,info3);
字符串示例
- 将字符串拆分成字符
你可以用展开运算符把字符串拆分为字符。
当然，如果你用空字符串调用 split 方法也是一样的。
const city = 'SHANGHAI';
console.log([...city]); // ['S','H','A','N','G','H','A','I']
// old way
city.split('')
总结
在本文中我们研究了 Javascript 中展开运算符的许多用例。如你所见，ES6 不仅使编写代码的效率更高，而且还引入了一些有趣的方法来解决长期存在的问题。现在所有主流浏览器都支持新语法。在你阅读本文时，就可以在浏览器的控制台中尝试上述所有例子。无论用哪种方式，你现在就可以把展开运算符和剩余参数用到自己的代码中。
