ES6 ... 展开&收集运算符

...展开&收集运算符，也就是说他可以干两件事情，展开和收集

一：收集，顾名思义把散列东西收集到一个地方，这个地方ES6规定收集在数组中

 

 

 

 

例如：下面函数fn将传递的参数收集在arg变量中，打印arg是一个数组，里面包含着传来的参数。就像吃豆子一样把值收到自己的嘴里。

function fn(...arg){
    console.log(arg);    //[1,2,3]
}
fn(1,2,3)

 

上面的代码让我们想起来arguments，也是保存着传过来的参数。但是我们知道arguments对象是类数组，当我们想使用数组的方法时，时使用不了的，需要手动的转化才可以，而此时的...收集后就是一个数组。可以使用一系列的数组方法。

 

...运算符让我们感觉有点省略的意思，把参数用...代替。当像下面那样传参时参数（3,4,5,6,7），实参（a,b,...arg）.此时的arg就是5,6,7.也就是说...收集只收集你没定义的形参，就像你省略不写他们。因此...只能作为最后一位出现。

 

function test(a,b,...arg){
    console.log(a,b,arg);   3,4,[5,6,7]
}
test(3,4,5,6,7);

 

 

 

 

二： 展开，展开,首先展开的这个东西应该是一个集合，如果是一个值的话，那还展开干嘛。所以ES6规定，展开的这个值必须是可迭代对象（带Symbol(Symbol.iterator)属性的对象），怎么看这个是不是可迭代对象，可以在他的原型上看有没有Symbol(Symbol.iterator)属性。事实上，所有集合对象--数组，Set，Map，字符串的原型上都默认携带这个属性，因此都是可迭代对象。展开成什么？展开成散列的值。

例如：

 

var arr = [1,2,3];
console.log(...arr);   //1 2 3

 

 

 

可以利用这个特性将两个数组合并成一个数组

 

var arr1 = [1,2,3];
var arr2 = [7,8,9];
var newArr = [...arr1,...arr2];

 

 

 

...运算符可以获取（展开）对象里的属性。但必须在对象里展开{...arg},因为对象不是可迭代对象所以直接...arg会报错。

 

var obj1 = {
    name: 'zhang',
    age: 18,
}
var obj2 = {
    ...obj1
}
console.log(obj2); {name:'zhang',age:18}

 

 

 

合并对象

 

var obj1 = {
    name:'zhang',
    age:18,
}
var obj2 = {
    leader:{
        'name':'wen',
        'age': 20
    },
    text:'ccc'
}
var newObj = {
    ...obj1, 
    leader:{
        ...obj2.leader
    }
}
console.log(newObj);