前端进阶攻略之ES6中展开&&收集运算符

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];  //1，2，3，7，8，9

…运算符可以获取（展开）对象里的属性。但必须在对象里展开{…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);