ES6之扩展运算符的运用

1.合并数组

//ES5
var arr1=[0,1,2];
var arr2=[3,4,5];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);
//ES6写法
var arr3=[0,1,2];
var arr4=[3,4,5];
arr3.push(...arr4);
console.log(arr3);

2.用于数组赋值

const [first,...arr]=[1,2,3,4,5];
console.log(first);//1
console.log(arr);//[ 2, 3, 4, 5 ]

注意：扩展运算符只能放在后面，否则会报错，如下

const [...arr,first]=[1,2,3,4,5];
 console.log(first); //报错

3.函数的返回值
JavaScript的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

上面代码从数据库取出一行数据，通过扩展运算符，直接将其传入构造函数Date。
4.字符串
扩展运算符还可以将字符串转为真正的数组。

var arr=[...'hello'];
console.log(arr);//[ 'h', 'e', 'l', 'l', 'o' ]

5.Map和Set结构，Generator函数
扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符，比如Map结构。

let map = new Map([ //Map是键值对结构
    [1,'one'],
    [2,'two'],
    [3,'three']
  ])
  let arr = [...map.keys()];
  let arr1=[...map.values()];
  console.log(arr); // [1, 2, 3]
  console.log(arr1); // [ 'one', 'two', 'three' ]