ES6 扩展运算符详解

1.数组（扩展运算符）

解构赋值
扩展运算符(spread)就是我们知道的三个点(...)，它就好像rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3]);
//1 2 3
console.log(1,...[2,3,4],5)
//1 2 3 4 5
console.log([1,...[2,3,4],5])
//[1, 2, 3, 4, 5]
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

复制数组

let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]

// 数组含空位
let arr2 = [1, , 3],
    arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]

合并数组

console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]
// 本质也是：**将一个数组转为用逗号分隔的参数序列，然后置于数组中**

2.对象

拓展运算符（...）用于取出 参数对象 所有 可遍历属性 然后拷贝到当前对象。
基本用法

let person = {name: "Amy", age: 15};
let someone = { ...person };
console.log(someone);  //{name: "Amy", age: 15}

合并对象

let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person;  //{age: 15, name: "Amy"}

注意：自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉。同理，自定义的属性在拓展运算度前面，则变成设置新对象默认属性值。

let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
let someone1 = {  name: "Mike", age: 17,...person};
console.log(someone);  //{name: "Mike", age: 17}
console.log(someone1);  //{name: "Amy", age: 15}

拓展运算符后面是空对象、null、undefined，没有任何效果也不会报错。

//空对象
let a = {...{}, a: 1, b: 2};
console.log(a);  //{a: 1, b: 2}

// null 、 undefined
let b = {...null, ...undefined, a: 1, b: 2};
console.log(b);  //{a: 1, b: 2}

3.函数

不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。
基本用法

function f(...values){
    console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

function addNumbers(x,y,z){
    return x+y+z;
}

var numbers = [1,2,3,4];
addNumbers(...numbers); //6
//函数调用中，扩展运算符（...）将一个数组，变为参数序列

扩展运算符与政策的函数参数可以结合使用，非常灵活：

function f(x,y,z,v,w){
    console.log(x,y,z,v,w)
}
var args = [0,1,5];
var args1 = [0,1];
f(-1,...args,2,...[3]);//-1, 0, 1, 5, 2
f(-1,...args1,2,...[3]);//-1, 0, 1, 2, 3