image.png

ES6/ES2015 对 Javascript 语言进行了重大升级。它引入了许多不同的新功能。其中之一就是我们可以用在任何兼容容器（对象、数组、字符串、集合、映射）前面的三个连续点。这使我们能够编写更加优雅和简洁的代码。本文将会使用最常见的例子来解释这三个点

三个点具有两个含义：展开运算符（spread operator）和 剩余运算符（rest operator）

展开运算符

展开运算符允许迭代器在接收器内部分别展开或扩展。
迭代器和接收器可以是任何可以循环的对象，例如数组、对象、集合、映射等。
你可以把一个容器的每个部分分别放入另一个容器。

const arr = ['axtlive',...anotherArr];

剩余运算符

剩余参数语法允许我们将无限数量的参数表示为数组，命名参数的位置可以在剩余参数之前。

const func = (first,second,...rest) => {};

使用示例

数组示例

1. 复制数组

当我们需要修改一个数组，但又不想改变原数组（因为其他地方可能会使用到原数组），因此我们必须进行数组的复制。

const arr = ['Vue','React','Angular'];
const copyArr = [...arr];    // ['Vue','React','Angular'];

console.log(arr === copyArr);  // false

它可以选择数组（arr）里面的每个元素，并把每个元素放到新的数据结构（copyArr）中。

当然我们也可以使用老的数组方法 map 来实现数组的复制并进行身份映射。

arr.map(item => item);

2. 唯一数组

如果我们想从数组里筛选出重复的元素，最简单的解决方案是什么？

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);

3. 串联数组

我们可以使用 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');

4. 将参数作为数组进行传递

当传递参数时，展开运算符可以使我们的代码更具可读性。
在 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);

5. 数组切割

如果有需要，使用展开运算符可以实现数组的切割，但是必须一个个的去命名剩余的元素，如果数组过大，这并不是一个好的方式。
使用 slice 方法切割更加直接。

const fruits = ['apple', 'orange', 'banana'];
const [apple, ...remainingFruits] = fruits; // ['orange', 'banana']

// old way
const remainingFruits = fruits.slice(1);

6. 将参数转换为数组

Javascript 中的参数是类似数组的对象。
你可以用索引来访问它，但是不能调用像 map、filter 这样的数组方法。
参数是一个可迭代的对象，那么我们做些什么呢？在它们前面放三个点，然后作为数组去访问！

const func = (...args) => console.log(args);
func('React');     // ['React'];

7. 将 NodeList 转换为数组

参数就像从 querySelectorAll 函数返回的 NodeList 一样。
它们的行为也有点像数组，只是没有对应的方法。

[...document.querySelectorAll('div')];

// old way
Array.prototype.slice.call(document.querySelectorAll('div'));

对象示例

1. 复制对象

复制对象和复制数组的工作方式相同。
在这之前你也可以使用 Object.assign 和一个空对象来实现对象的复制。

const info = {name:'axtlive'};
const copyInfo = {...info}; // {name:'axtlive'}

console.log(info = copyInfo); // false

// old way
const copyInfo = Object.assign({},info)

2. 合并对象

合并的唯一区别是具有相同键的属性将被覆盖。
最右边的属性具有最高优先级。

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);

字符串示例

1. 将字符串拆分成字符

你可以用展开运算符把字符串拆分为字符。
当然，如果你用空字符串调用 split 方法也是一样的。

const city = 'SHANGHAI';
console.log([...city]); // ['S','H','A','N','G','H','A','I']

// old way
city.split('')

总结

在本文中我们研究了 Javascript 中展开运算符的许多用例。如你所见，ES6 不仅使编写代码的效率更高，而且还引入了一些有趣的方法来解决长期存在的问题。现在所有主流浏览器都支持新语法。在你阅读本文时，就可以在浏览器的控制台中尝试上述所有例子。无论用哪种方式，你现在就可以把展开运算符和剩余参数用到自己的代码中。