ECMAScript6-解構

▓▓▓▓▓▓ 大體介紹

　　解構：就是將聲明的一組變量和與相同結構的數組或者對象的元素數值一一對應，並將變量相對應元素進行賦值

 

▓▓▓▓▓▓ 數組解構

　　例子：

    let [a,b,c] = [1,2,3];
    console.log(a); //1
    console.log([a,b,c]); //[1, 2, 3]

　　能夠看到，數組中的a,b,c分別對應1，2,3

 

　　嵌套的數組也能夠進行解構

    let [a,[b,[c]]] = [1,[2,[3]]];
    console.log(c); //3

    let [d,,e] = [1,2,3];
    console.log(e); //3

    let [f,...tail] = [1,2,3];
    console.log(tail); //[2, 3]

 

　　在解構不成功時，變量的值就是undefined

    let [a,b] = [1];
    console.log(b); //undefined

 

　　不徹底解構也是能夠的

    let [a,b,c] = [1,2,3,4];
    console.log(c); //3

 

　　也能夠設置默認值

    let [a = 1] = [];
    console.log(a); //1

    let [b = 1] = [2];
    console.log(b); //2

    let [c = 1] = [undefined];
    console.log(c); //1

    let [d = 1] = [null];
    console.log(d); //null

　　注意：在ES6中使用嚴格相等運算符（===）。因此若是默認值不嚴格相等undefined，默認值就不會生效。例如null

 

　　默認值也能夠是表達式，可是要注意只有默認值在使用時纔會觸發函數（惰性求值）

    function f(){
        alert(1);
    }

    let [a = f()] = [3]; //f()不會執行

    let [b = f()] = [undefined]; //會執行

 

▓▓▓▓▓▓ 對象解構

　　例子：

    let {foo,bar} = {foo:1,bar:2};
    console.log(foo); //1

 

　　注意：與數組不一樣，對象解構時不是根據位置對變量賦值的，而是經過變量名進行賦值，即變量名和屬性名必須相等才能夠進行賦值，位置不重要

    let {bar,foo} = {foo:1,bar:2};
    console.log(foo);//1

 

　　若是變量名和屬性名不相同，則要採起下面的方法

    let {first: f,last: l} = {first:1,last:3};
    console.log(l); //3

　　意思就是先在對象中查找first屬性，若是有就賦值給f，其中first是匹配的模式，而f纔是真正的變量

　　因此對象解構的完整形式是：

    let {first: first,last: last} = {first:1,last:3};

 

　　對象解構也能夠進行嵌套

    let obj = {
        a:1,
        b:[
            'hello',
            {c:'world'}
        ]
    }

    let {a: a,b: [h,{c:w}]} = obj;

    console.log(a); //1
    console.log(h); //hello
    console.log(w); //world

 

　　對象解構也能夠設置默認值，而且若是解構失敗，變量會賦值undefined

    let {x: x = 1,y: y=2,z: z=3,w: w} = {x:3,y:null,z:undefined};

    console.log(x) //3
    console.log(y) //null
    console.log(z) //3
    console.log(w) //undefined

 

▓▓▓▓▓▓ 字符串解構

　　字符串之因此可以解構是由於此時字符串轉換成了一個數組

    let [a,b,c] = 'hello';
    console.log(a); //h
    console.log(b); //e
    console.log(c); //l

 

▓▓▓▓▓▓ 數值和布爾值解構

　　解構賦值時，若是等號右邊是數值和布爾值，則會先轉爲對象

    let {toString: s} = 123;
    s === Number.prototype.toString // true

    let {toString: a} = true;
    a === Boolean.prototype.toString // true

　　上面代碼中，數值和布爾值的包裝對象都有tostring屬性，所以變量s都能取到值。

　　解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉爲對象。因爲null和undefined沒法轉爲對象，因此對它們進行解構賦值，都會報錯。

 

 

參考資料：　

 

　　　　　　　　ECMAScript 6入門-阮一峯