ES6(二） Destructuring-變量的解構賦值

1、解構的含義  

    允許按照一定的模式，從數組和對象中取值，對變量進行賦值，稱為解構。

    解構賦值時，只要等號右邊的值不是對象，就先將其轉換成對象。

 本質上，這種寫法屬於 “模式匹配”，只要兩邊模式相同，左邊的變量就會被賦予對應的值。

let [head,...tail]=[1, 2, 3, 4]; //不完全解構，左邊的模式，只匹配一部分的等號右邊的數組

    解構后： head=1，tail=[2,3,4]。

 

2、解構的限制。

     （1）undefined與null 無法轉換成對象，解構賦值就會報錯。

let { y } = null;    // Cannot match against 'undefined' or 'null'.

     （2）如果等號的右邊不是數組，轉換對象以后不具備 Iterator接口，或本身就不具備Iterator接口，

  即某種數據結構具有Iterator接口，都可以采用數組形式的解構賦值。

    let [foo]=1; //undefined is not a function，報錯的行數會指向上一行代碼

    let [foo1,foo2]=new Set(['a', 'b', 'c']);

 3、解構賦值時， 左邊參數允許默認值。

    (1)ES6內部使用嚴格相對運算符，因此，若defaultValue!==undefined,默認值失效。

    var [x=1]=[undefined]; //x=1
    var [y=2]=[null];  //y=2

    (2)賦予默認值時，左邊參數 可以引用解構賦值的其他變量，但該變量必須已經聲明.

let [x1=y1,y1=1]=[]; //error，因為此時y1還沒有值，應該如此寫： let[y=1,x=y]=[];

4、對象解構賦值

 對象屬性沒有次序，變量名必須與屬性相同。

    let { fishInstance,dogInstance}={
        dogInstance: {
            name: 'dog',
            moveType: 'run'
        },
        fishInstance{
            name:'fish'
        }
    }

5、變量名與屬性名不一致，必須寫成下面這樣。

    真正被賦值的是后者，而不是前者。

let { oldName:newName}={oldName: '12222222', bar: 'barTest'}

6、

 let tree = {
        root: {
            leaf: {
                left: 5,
                right: 5
            }
        }
    }

var { root:{leaf:{left}} }=tree; //此時， root 與 leaf 都是模式,不會被賦值，只有leaf是變量

console.log(root);  /*root is not defined*/

7、對象的解構也可以指定默認值,生效的條件是對象的屬性嚴格等於 undefined

 如果解構模式是嵌套的對象，而且子對象所在的父屬性不存在，則error。

 let {x=3}={};

 let { foo: { name }}={bar: 'bar'};

 將一個已經申明的變量用於解構賦值，必須非常小心。

 let temp;
 {temp}= {x: 1}; /error

 ( { temp }={x: 1} ); //使用圓括號，避免JS引擎將 "{ }" 解釋為代碼塊

8、字符串解構賦值，會將字符串轉換成類似數組的對象。

 const [a,b,c,d,e]='hello world';
    let { length:strLen }='world';

 9、解構 數值和布爾值時，先轉換成對象

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

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

解構使用場景

 (1)可以很方便的將 現有對象的方法，賦值給某個變量.

let { log: selfLog}=console;
selfLog('test log');

 (2)交換變量.

[x,y]=[y,x];

 (3)從函數返回多個值

    function getPerson() {
        return {
            name: 'jack',
            age: 19
        }
    }

    var {name,age}=getPerson();

 (4) 定義函數參數后，可以不按順序傳入

    function setPerson({name,age,address}) {

    }

    setPerson({age: 19, address: 'china', name: 'Tom'});

 (5)提取JSON對象中的數據

  let jsonData = {
        age: 19,
        name: 'Tom',
        son: [
            'little Jack',
            'little Tom'
        ]
    };

    let { son:child }=jsonData;

 (6)遍歷map結構

    var map =new Map();

    for(let [key,value] of map) { }

    for(let [,value] of map ) { }

 (7)獲取模塊的指定方法

 const { SourceMapConsumer }= require('');