es6 三点运算符

es6中三点运算符有两种用法

1.作为参数使用

　　当定义函数对象时，参数的个数不确定，可以用三点运算符设置一个动态参数。

　　例：

var fun = function(a,...list){//a为普通参数，...list为剩余参数
    console.log(a,list)
}
fun('0','a','b'); // 0 [a,b]
fun('0','a','b','1'); // 0 [a,b,1]

　　函数的最后一个命名参数以...为前缀，则它将成为一个由剩余参数组成的真数组，数组的元素由函数的普通参数除外的实际参数提供。

　　剩余参数和arguments对象的区别

　　1.剩余参数只包含那些没有对应形参的实参，而arguments对象包含了传给函数的所有实参

　　2.arguments对象不是一个真正的数组，而剩余参数是真正的Array实例，可以在剩余参数上直接使用所有的数组方式，比如sort，map，forEach或pop

　　3.arguments对象还有一些附加属性（比如callee属性）

　　注意：剩余参数必须作为函数的最后一个参数出现，其后不能有任何参数

2.作为拓展运算符使用

　　2.1数组

　　 解构赋值

　　数组中的扩展运算符就像剩余参数的逆运算，将数组转为用逗号分隔的参数列

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 a = [1,2,3,4,5];
let b = a; // 相当于copy 
a.push(6); 
console.log(a); // [1,2,3,4,5,6] 
console.log(b); // [1,2,3,4,5,6]

　　上边的例子说明b是a的一个引用，所有两个数组所在的内存是一个，更改a的同时，b也会改变，所以复制数组时需要开辟一个内存

let a = [1,2,3,4,5];
let b = [...a];
a.push(6);
console.log(a); // [1,2,3,4,5,6]
console.log(b); // [1,2,3,4,5]

　　合并数组

console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

　　本质就是：将一个数组转为用逗号分隔的参数序列，然后置于数组中

　　2.2对象

　　对象中的扩展运算符（...）用于取出参数对象中的所有可遍历属性，拷贝到当前对象中。

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
/*等价于*/
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

　　合并对象

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 str='abc';
['aaa',...str,'ccc'];//[aaa, a, b, c, ccc]