ES6扩展运算符三个点(...)

    在react或者vue项目中，你或许已经注意到有的地方已经开始使用ES6扩展运算符...，这个运算符很简洁，如果不熟悉，可能会觉着难以理解，这里稍微介绍一下扩展运算符的用法。

    ES6扩展运算符简化了数组或者对象赋值问题，以对象类型为例，我们最早做对象拷贝的时候，需要将一个对象的所有属性一一赋值给新的对象，如果新的对象还有别的属性，需要接着设置：

var obj = {id:1,name:'buejee'}
var obj2 = {};
for( var key in obj){
  obj2[key] = obj[key]
}
obj2.age = 18;
console.log(obj)
console.log(obj2)

     运行这个js，我们得到结果如下：

    { id: 1, name: 'buejee' }
    { id: 1, name: 'buejee', age: 18 }

    当我们有了ES6扩展运算符，赋值问题就变得很简单了，只需要一步就能赋值成功。    

const obj = {id:1,name:'buejee'}
const obj2 = {...obj,age:18}
console.log(obj)
console.log(obj2)

    运行这段代码，同样能够得到上面的结果。

    从这个示例中，我们可以看出扩展运算符...将对象obj={id:1,name:'buejee'}做了拆分，好像拆分为了一个个属性集合，而且没有使用{嵌套}，这里如果单独使用obj，得到的结果是这样的：

   

    从截图中可以看出，直接使用obj，而不是...obj，最终的obj2嵌套了obj对象。

    同样的，扩展运算符使用在数组赋值中，也是类似的功能。将数组各个元素单独提取出来，拼接到新的数组中。

arr = [1,2,3]
arr2 = [...arr,4,5,6]
console.log(arr)
console.log(arr2)

    运行这段代码，结果如下：

    [ 1, 2, 3 ]
    [ 1, 2, 3, 4, 5, 6 ]

    以上是使用扩展运算符来做右值赋值，其实他也可以作左值赋值，左值的话，类似做减法，把对象或者数组中剩余的部分赋值给新的变量。我们来看看如下的例子：    

const obj = {id:1,name:'buejee',age:18}
let {id,...info} = obj
console.log(id)
console.log("info =",info)
let [a,b,...c]=[1,2,3,4,5]
console.log(a)
console.log(b)
console.log(c)

    运行这段代码结果如下：

    1
    info = { name: 'buejee', age: 18 }
    1
    2
    [ 3, 4, 5 ]

     通过以上几个简单的例子，我们基本能够搞清楚扩展运算符的用法，使用起来确实很方便。就是有些难以理解。我们在实际应用中需要注意的是，不要把对象和数组搞混淆了。