ES6中的(...)扩展运算符

很简单啊，我就是想一下啊啊啊啊啊啊啊．

---

扩展运算符（spread）．．．

１．（．．．）相当于rest参数的逆运算，将一个数组转为用逗号分割的参数序列．

２．作用：

• 用于函数调用．
• 替代函数方法apply：因为扩展运算符可以展开数组，所以不需要再使用apply方法，将数组转为函数的参数．
• 用于数组字面量

eg１：

//将items的数组转换为参数序列，再进行push操作．
function push(array, ...items) {
    array.push(...items);
}

eg2：扩展运算符后面还可以放置表达式

const arr = [...(x > 0) ? ['a'] : [], 'b'];

eg3：代替函数的apply方法：因为扩展运算符可以展开数组，所以不需要用apply方法，将数组转为函数的参数．

let args=[0,1,2];
function fun(x,y,z) {
    //...
}
//es5
fun.apply(null,args);
//es6
fun(...args);

//es5
Math.max.apply(null,[14,3,77]);
//es6
Math.max(...[14,3,77])

３．应用

• 复制数组：数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组．

const a1=[1,2];
//第一种
const a2=[...a1];
//第二种
const [...a2]=a1;

• 合并数组

let arr1=[1,2,3];
let arr2=["a","b"];
let arr3=["weiqiujuan","liuxiaotian"];
//es5
arr1.concat(arr2,arr3);
//es6
[...arr1,...arr2,...arr3];

• 与解构赋值结合：注（只能将扩展运算符用于数组赋值的参数的最后一位，否则报错）

//es5
a = list[0], rest = list.slice(1);
//es6
[a, ...rest] = list;

const [first, ...rest] = [];
first // undefined
rest  // []

• 将字符串转换为真正的数组(：有一个重要的好处，那就是能够正确识别四个字节的 Unicode 字符。)JavaScript 会将四个字节的 Unicode 字符，识别为 2 个字符，采用扩展运算符就没有这个问题

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

• 实现来Iterator接口的对象（任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组。）
  

  对于没有部署Iterator接口的，可以使用Arrayfrom将其转化为真正的数组．

let nodeList=document.querySelectorAll("div");//返回的是一个对象
let array=[...nodeList];//将其转换为真正的数组，NodeList对象实现了 Iterator 。

• Map和Set结构，Generator函数（扩展用算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用它）

map：

let map = new Map([
    [1, 'weiqiujuan'],
    [2, 'liuxiaotian'],
    [3, 'liudishizhu']
]);

let arr = [...mao.keys()];//［1,2,3］

Generator：函数运行后，返回一个遍历器对象，所以可以使用

const go=function *() {
    yield 1;
    yield 2;
    yield 3;
};

[...go()];//[1,2,3]