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