es6--解構

解構：解構是一種打破數據結構，將其拆分爲更小部分的過程。

爲何使用解構

直接上個平常開發常常遇到的問題：

let options = {
    repeat:true,
    save:false
}

let repeat = options.repeat,
    save = options.save;

兩個還好，若是options裏還有更多的屬性呢？一遍一遍的 "options." 估計會使你抓狂吧~

對象解構

let node = {
    type:'javascript',
    name:'index'
}

let {type,name} = node;  //對象解構

console.log(type);  //javascript
console.log(name);  //index

解構賦值

let node = {
    type:'javascript',
    name:'index'
};
let type = 'css',
    name = 'main';
    
({type,name} = node);  //注意（），下方tips中有解釋

console.log(type);  //javascript
console.log(name);  //index

tips: 切記要用一對小括號包裹解構賦值語句，js引擎將一對開放的花括號視爲一個代碼塊，語法規定，代碼塊語句不容許出如今賦值語句左側，添加小括號後能夠將塊語句轉化爲一個表達式，從而實現整個解構賦值的過程。

解構默認值

使用解構賦值表達式時，若是指定的局部變量名稱在對象中不存在，那麼這個局部變量會被賦值爲undefined。

let node = {
    type:'javascript',
    name:'index'
};

let {type,name,value} = node;

console.log(type);  //javascript
console.log(name);  //index
console.log(value);  //undefined

爲解構變量添加默認值的作法和es6設置函數參數默認值的方法同樣，只需在屬性名稱後添加 = 和相應的默認值就能夠：

let node = {
    type:'javascript',
    name:'index'
};

let {type,name,value = 18} = node;

console.log(type);  //javascript
console.log(name);  //index
console.log(value);  //18

爲非同名局部變量賦值

上面列舉的全部示例都是局部變量的名字正好和對象的屬性同名的狀況，在真是的開發中固然不會有一直這麼順心的狀況，那麼，如何給與對象屬性不一樣命的本地變量賦值呢：

let node = {
    type:'javascript',
    name:'index'
};

let {type:localType,name:localName} = node;

console.log(localType);  //javascript
console.log(localName);  //index

type:localType語法的含義是：讀取名爲type的屬性並將其值存儲在變量localType中，這種語法與傳統對象字面量的語法相悖，使用的時候須要特別注意下。

固然，給非同名變量解構賦值的時候也能夠設置默認值：

let node = {
    type:'javascript',
};

let {type:localType,name:localName = 'default'} = node;

console.log(localType);  //javascript
console.log(localName);  //default

嵌套對象解構

let node = {
    name:'index',
    loc:{
        start:{
            line:1,
            column:1
        },
        end:{
            line:1,
            column:4
        }
    }
}

let {loc:{start}} = node;

console.log(start.line);  //1
console.log(start.column);   //1

在此次解構模式中，咱們使用了花括號，意義爲在找到node對象中的loc屬性後，應當深刻一層繼續查找start屬性。在這次解構中，全部冒號前面的標識符都表明在對象中的檢索位置，右側爲被賦值的變量名，若是冒號後是花括號，則意味着要賦予的最終值嵌套在對象內部更深層級中。

數組解構

跟對象解構相比，數組解構簡單多了：

let colors = ['red','green','blue'];
let [firstColor,secondColor] = colors;

console.log(firstColor);  //red
console.log(secondColor);  //green

//若是隻須要第三個值，或者中間的幾個值不須要改怎麼辦
let [,,thirdColor] = colors;  //不須要的元素用","來進行佔位便可

console.log(thirdColor);  //blue

解構賦值

數組解構 = 號左側不須要用小括號包圍，由於[]不會引發js引擎的誤會

let colors = ['red','green','blue'];
let firstColor = 'black',
    secondColor = 'purple';

[firstColor,secondColor] = colors;

console.log(firstColor);  //red
console.log(secondColor);  //green

數組解構一個實用的小技巧-（交換兩個變量的值）：

let num_a = 1;
let num_b = 2;
[num_a,num_b] = [num_b,num_a];

console.log(num_a);  //2
console.log(num_b);  //1

默認值

數組解構也能夠添加默認值，當指定位置的屬性不存在或值爲undefined時使用默認值

let colors = ['red'];

let [firstColor,secondColor='green'] = colors;

console.log(firstColor);  //red
console.log(secondColor);  //green

嵌套數組解構

let colors = ['red',['green','lightgreen'],'blue'];

let [firstColor,[,secondColor]] = colors;

console.log(firstColor);  //red
console.log(secondColor);  //lightgreen

不定元素

es6函數參數中有個不定參數的概念，數組解構中有個與之類似的概念-不定元素。在數組中可經過...語法將數組中的其他元素賦值給一個特定的變量。
tips:數組解構中，不定元素必須是最後一個條目，不然會出現語法錯誤

let colors = ['red','green','blue'];

let [firstColor,...restColors] = colors;

console.log(firstColor);  //red
console.log(restColors);  //["green", "blue"]

不定元素的另外一個用法是賦值數組：

let colors = ['red','green','blue'];
let [...cloneColors] = colors;

console.log(cloneColors);  //['red','green','blue']


//es5中能夠經過concat來實現數組的複製
let cloneColors2 = colors.concat();
console.log(cloneColors2);  //['red','green','blue']

混合解構

let node = {
    type:'javascript',
    loc:{
        start:{
            line:1,
            column:1
        },
        end:{
            line:1,
            column:4
        }
    },
    range:[0,3]
}

let {
    loc:{end},
    range:[,endIndex]
} = node;

console.log(end.line);  //1
console.log(end.column);  //4
console.log(endIndex);  //3