ES6扩展之运算符...

ES6 扩展运算符...

数组

说到...(三个点)，rest用于获取函数的多余参数。
而扩展运算符...,它与rest参数相反，rest用一个变量数组的值去表达多个参数，而这里的扩展运算符，相当于将一个数组的值以特殊字符去分隔而得到的

示例：

var a=[1,2,3]
console.log('a=',a)
console.log('...a=',...a)

应用

1.复制数组
对于只有一层的数组复制为深复制，即数组中不包含对象，否则为浅复制。（深浅复制的区别）

一层数组深复制：

 var a=[1,2,3]
 var c=[...a]//先试用...去提取分离多个数据，然后在使用[]转成数组
 a[0]=9;
 console.log('a=',a)
 console.log('c=',c)

二层浅复制：

 	var a=[{a:1},2,3]
    var c=[...a]
    a[0].a=9;
    console.log('a=',a)
    console.log('c=',c)

2.合并数组

ES5 使用concat合并数组

ES6 可以使用...将数组转成以特殊字符分隔数值，然后使用[]转成数组就是合并数组。

示例:

var  a=[4,5,6];
var  c=[1,2,...a]
输出:[1,2,4,5,6]

加深记忆理解：...将数组以特殊字符分隔，那么a就分隔为4 5 6
然后又用[]转成数组所以就是[1,2,4,5,6]

3、...既然数组以特殊字符分隔，那么就有解构赋值

const [first, ...rest] = [1, 2, 3, 4, 5]; 
first // 1
 rest // [2, 3, 4, 5]
// 来自于`ES6` 标准入门

4、...可以将iterator接口的数据以特殊字符分隔，那么字符串亦可（ES6中为其添加了Iterator 接口）转为数组

	var a='hello world'
    console.log('=',...a)

对上述分隔成单独的数据以[]转为数组即可
如下：

var a='hello world'
console.log('=',[...a])

总结

任何具有iterator接口数据都可以通过扩展运算符...以特殊字符分割，然后使用[]转成数组

对象

说完了数组中的扩展运算符，而这里的对象运算符，其实一定程度上和数组的区别不大，而区别在于数组在其分割后的数据依旧具备iterator结构，而这里对象因为直接提取属性，那么是一个key value（形象上），是不具备iterator的所有会报错。ES2017引入对象上的扩展运算符...

应用

没什么可说的。参考数组。只要具备iterator接口的都可以使用
1.复制
深复制（和数组一样一层数据为深复制）

var a={b:1,c:1}
var d={...a}
a.b=3;
console.log('a=',a)
console.log('a=',d)

浅复制（数据结构超过一层）：

2.合并对象（如果两者有相同的属性，那么后者会替换前者）

	var a={b:1,c:2}
    var d={e:3,f:4}
    var g={...a,...d};
    //var g={..a,d}//输出为{{b:1,c:2,d:{e:3,f:4}},在这里d没有去提取
    console.log('a=',a)    //输出{b:1,c:2}
    console.log('g=',g)    //输出{b:1,c:2,e:3,f:4}

//其他的参考数组，只要居右iterator结构的都可以使用...

总结

和数组中的扩展运算符大致一致，同样是使用...将对象中的属性和值提取出来。这里面和数组的区别是数组可以不用[]去转，因为其分割后的数据依旧具备iterator结构，而这里因为直接提取属性，是不具备iterator的所有会报错。
例如：

var a={b:1,c:2}
console.log(...a)

报错：

而用{}包括以下变为iterator之后就不会报错.

总结

对于数组和对象的扩展运算符使用时。使用之后的数据依然具备iterator结构，否则报错（对象使用之后无{}则就会报错，而数组因为其扩展后依然具备所以不会报错）

千里之行
始于足下