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);

 

 

 

 

posted @ 2019-11-18 16:23  张最棒  阅读(...)  评论(... 编辑 收藏