ES6扩展运算符使用

1.将字符串转为真正的数组。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

2.合并数组

arr1.push(...arr2) // 把arr2合并到arr1的后面
arr1.unshift(...arr2) //把arr2合并到arr1的前面

如果你想在数组内合并数组，你可以像下面这样做：

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

3.复制数组
复制数组是我们常常要做的工作，在过去，我们会使用Array.prototype.slice去实现，但现在我们可以使用扩展运算符去得到一个复制后的数组：

var arr = [1,2,3];
var arr2 = [...arr]; // 就像 arr.slice()
arr2.push(4)

3.结构赋值
你可以使用扩展运算符配合其他运算符一起，从变量中提取有用的信息，就像这样：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
​

​​​​​​4.函数多参数传递, 替换Apply

先把参数定义成数组，函数定义好。

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']
let fun1 = (a1, a2, a3, a4) => {
  console.log( a1, a2, a3, a4)
}

在ES6前，要把数组参数传递给函数，要么按照下标访问数组元素去调用函数，缺点是数组个数和函数参数个数完全绑定，有一个个数发生变化，那么就要修改了。要么就用Apply进行调用

fun1(arr4[0], arr4[1], arr4[2], arr4[3])

fun1.apply(null, arr4)

如果是用扩展运算符，那就方便咯。

fun1(...arr4)
//结果 arg1 arg2 arg3 arg4

调用简洁爽快。

5.可以展开实现了Iterator 接口的对象

比如Map，Set，数组就是从Iterator接口实现来的，Object不是，所以扩展Object会报错。

扩展Set。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)
//结果 1 2 3

展Map。

let map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(...map1)
//结果 [ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

注意，扩展出来的一个个的数组，按照map的键值对结构，每个数组都是2个元素，一个是key，一个是value。