es6 扩展运算符 ...

es6 新增了不少特性，其中包括扩展运算符 ...，扩展运算符使用场景比较多，并且使用在不一样的场景所表达的意思是不同的。总结以下

• rest 参数
• 数组的扩展运算符
• 对象的扩展运算符

rest 参数

咱们都知道arguments对象不是一个真正的数组，因此es6 推出了一种新的写法 以下：

 

1 function say(...name) {
2     name.forEach(item => {
3         console.log(item)
4     }) //joel,vue,js
5     console.log(name instanceof Array) //true
6 }
7 say('joel','vue','js')

 

这种在function形参中使用三个点 ...  表示用于获取函数的多余参数（把多余的参数序列转为一个数组），这样就不须要使用arguments对象了。rest 参数的变量是一个数组，该变量将一组参数放入数组中。

rest 参数只能是最后一个形参，并且函数的length属性，不包括 rest 参数。

数组的扩展运算符

在数组中使用 ... 扩展运算符，就好像是rest 参数的反运算  以下代码

1 let array = [123,211,332,412,125,236,237,787]
2 console.log(Math.max(...array))

把一个数组转为用逗号分隔的参数序列。

对象的扩展运算符

对象的扩展运算符分为两种，一种是在解构赋值中，以下代码

1 let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
2 console.log(z) // {a:3,b:4}

至关于把目标对象自身的全部可遍历、但还没有被读取的属性，分配到指定的对象上面。全部的键和它们的值，都会拷贝到新对象上面。

因为解构赋值要求等号右边是一个对象，因此若是等号右边是undefined或null，就会报错，由于它们没法转为对象。

解构赋值必须是最后一个参数，不然会报错。

1 let { x, ...z, y } = { x: 1, y: 2, a: 3, b: 4 }; // 语法错误

另一种是非解构赋值中，以下代码

 1 let obj = {
 2     name: 'joel', 
 3     age: '20', 
 4     tempObj: {
 5         name: 'tempJoel'
 6         }
 7     }
 8 let temp = {...obj}
 9 temp.tempObj = 'joel29'
10 console.log(temp) // {name: "joel", age: "20", tempObj: "joel29"}
11 console.log(obj.tempObj) // {name: "tempJoel"}

取出参数对象的全部可遍历属性，拷贝到当前对象之中。 如上代码，这种拷贝不是浅拷贝，只有在解构赋值的拷贝是浅拷贝， 以下代码

 1 let obj = {
 2     name: 'joel', 
 3     age: '20', 
 4     tempObj: {
 5         name: 'tempJoel'
 6         }
 7     }
 8 let temp = {...obj}
 9 temp.tempObj.name='tempJoel修改'
10 console.log(temp)
11 console.log(obj)

咱们是修改temp 对象的tempObj，可是obj对象中的tempObj中的name也同步修改了。

在对象的扩展运算符中都是把目标的对象的属性拷贝到对象中，若是是解构是存在浅拷贝 

 扩展运算符的本质

在es6 中统一了遍历的接口 Iterator，Iterator 接口的目的，就是为全部数据结构，提供了一种统一的访问机制，即for...of循环。

扩展运算符（...）内部实际上是调用了 Iterator 接口。

总结

rest 参数

数组的扩展运算符

对象的扩展运算符