es6 - 解構賦值

解構賦值

解構賦值是一個聽起來比較高大上的特性，但按個人理解，它就是一種語法糖。它並無賦予js更強大的能力，只是讓賦值操做更加的靈活，效率。

在es6以前，賦值操做須要=左邊是一個變量，右邊是一個數據或返回數據的函數等。
而解構賦值，是將=右邊的結構分解(解構)，而後按照格式給=左邊進行賦值，主要分爲數組的解構賦值和對象的解構賦值。

語法

解構賦值的格式爲，=左邊爲解構賦值的語法，=右邊爲初始化器，即一個對象或數組。

數組的解構賦值

數組的解構賦值是基於數組位置的，好比：

let [a,b] = [1,2] // 結果a等於1，b等於2

也能夠經過解構改變變量的值。好比：

let a = 1, b = 2;
[a,b] = [100, 200];

當=左邊與右邊不徹底匹配時，未能匹配到的變量會被賦值爲undefined,好比：

let [a,b,c] = [1,2] //a爲1，b爲2，c爲undefined

因此能夠經過給一些變量指定默認值，以防止這種狀況的發生。好比：

let [a,b,c=3] = [1,2] //a==1, b==2, c==3

注意：只有當在右邊找不到對應的值或值爲undefined時，纔會使用默認值。

有時候，解構賦值中，你可能只關心一部分數據，這時能夠經過佔位符只給某些值賦值。好比：

let [a,,,b,,] = [1,2,3,4,5,6,7,8] //a==1 b==4

在解構賦值中，經過在變量前加...號，表示生成的變量爲一個數組。好比：

let [a,,...b] = [1,2,3,4,5] //a == 1, b==[3,4,5]

上面展現的狀況都是能夠聯合使用的,好比：

let [a,b=8,,..c] = [1,2,3,4,5,6] //a==1 b==2 c=[4,5,6]

對象的解構賦值

對象的解構賦值是基於屬性的。好比：

let {name, age} = {
    name: 'icode007',
    age: 27
}
//name == 'icode007' age==27

與數組的解構賦值同樣，對象的解構賦值同樣給未能解構的變量賦值undefined，同樣可使用默認值。

當給已存在的變量解構賦值時，注意加()

let name, age;
({name, age} = {name: 'icode007', age: 27});

這是因爲若是不加(),js會把左邊當作一個代碼塊，會報錯。 加了()後，整個變成了一個合法的表達式。

在上面的解構賦值中，變量名和對象中的屬性名必須相同，只有這樣，才能找到對應的要解構賦值的數據。
但若是咱們想要給數據賦一個不一樣的名字呢？ 也是有辦法的。

let {name:myName, age: myAge} = {name: 'icode007', age: 27}

這樣相應的名字和年齡就被賦值給myName和myAge了。

也能夠同時使用默認值：

let {name:myName, age: myAge, jog: myJob = 'soft Engineer'} = {name: 'icode007', age: 27}

以上咱們列舉的對象的解構賦值的例子都很是的簡單，但在實際開發中，JSON數據多是很是複雜的，這時的解構賦值語法也可能變得複雜。好比：

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};
let {loc: { start }} = node;
console.log(start.line);
console.log(start.column);

注意：每當有:出如今解構賦值中時，:左邊的標識符表示要檢查的位置，右邊表示要賦值的目標，若是右邊是{}或[]時，表示要賦值的變量在更深層次結構中。

上面的全部實例，如默認值，變量改名等特性均可能存在於一個解構賦值語句中。而且，數組的解構賦值與對象的解構賦值，也能夠混合使用。這爲咱們從複雜的數據結構中提取相應數據提供了極大的便利。

函數參數的解構

函數參數的解構功能對於實現多參的函數是很是有用的。
好比

function setCookie(name, value, options){
    options = options || {};
    var secure = option.secure,
        path = option.path,
        domain = option.domain
    ;
    //...
}

setCookie('type', 'js', {
    secure: true,
    expires: 60000
    })

上面的函數是經常使用的實現多參函數的方式，name, value爲必填參數，全部可選參數封裝到options中，做爲options的屬性使用。
但上面的函數存在一個問題就是，你只看函數的定義，是沒法知道到底可選參數的名稱是什麼的？你須要閱讀函數代碼，瞭解函數才能使用它。

使用函數參數解構則直觀不少：

function setCookie(name, value, {secure, path, domain}){
    //...
}

使用一樣的使用方式能夠調用這個函數。

可是這種寫法有種問題是當只傳入name和value參數時，會報錯。

更好的寫法是使用函數的默認參數。

function setCookie(name, value, {secure, path = "/", domain} = {}){
    //...
}

注意事項

• 數組的解構賦值中，使用...rest的變量必須放在最後。
• 與普通的變量的賦值語句同樣，解構賦值語句也是有值的，它的值就是=右邊的內容。

最佳實踐

• 變量交換值

在es6以前，交換兩個變量的值，須要建立一箇中間變量，相似這樣

var a = 1, b = 2, temp;
temp = a; a = b; b = temp;

如今只須要一行代碼：
[a,b] = [b,a]

• 提取json中的一些數據

在實際開發中，數據解構是很是複雜的，使用對象屬性去層層調用的語法很是不直觀，經過解構賦值，可讓代碼更加的直觀與簡潔。

• 數組的複製

數組的解構賦值中，有個小技巧。

let arr = [1,4,9,55,244];
let [...cloneArray] = arr;
console.log(cloneArray);

這樣就實現了數組的淺複製，而在之前，數組的複製都是經過concat()方法來完成。

更多es6的內容，能夠關注個人專欄--學習ES6.