ES6系列（二）變量的解構賦值

ES6變量的解構賦值

ES6容許按照必定的默認，從數組、對象等具備Iterator接口（後面系列會介紹到）的數據中提取值，對變量進行賦值，這稱爲解構賦值。

解構賦值有幾點要求：

1. 等號兩邊的模式相同。
2. 等號右邊的數據要具有Iterator接口。
3. 解構不成功，變量的值等於undefined

4. 解構賦值容許指定默認值，不過ES6內部使用嚴格相等運算符(===)，來判斷一個位置是否有值，若是某個位置的值不嚴格等於undefined， 那麼默認值是不會生效的。默認值也能夠引用解構賦值的其它變量，可是該變量必須已經聲明。以下所示

   let [a=1] = [null];
    console.log(a); //null 不嚴格相等，其實就是對應位置的值必須是undefined
   let [b=2]=[undefined] || [];
   console.log(b); //2
   //引用解構賦值的其它變量，
    let [x=y, y=2] = []; //error y未聲明
    let [x=2, y=x] = []; //x=2, y=2

5. 若是在同一個做用域，某個變量被聲明過，直接使用同一個變量名解構賦值，會報錯。此時須要在首尾加一個()，解析器將認爲這是另外一個塊做用域,解構賦值能夠理解爲聲明變量並賦值。

   let a,b;
   {a} = {a:1}; //error a has already exited
   ({b} = {b: 2});  //2

6. 解構賦值的規則是，若是等號右邊不是對象，也不具有Iterator接口，會將其轉換爲對象，因爲undefined與null沒法轉換爲對象，對這兩個解構賦值時，會報錯。

數組的解構賦值

數組的解構賦值在於，左右的順序嚴格對應

對象的解構賦值

1.對象的解構賦值在，左右的屬性名稱要嚴格對應

let {some,anther } = { some: 1, anther:2 }

2.若是名字不對應（每每須要重命名）

let {some: anther} = {some: 1};
    console.log(some); //ReferenceError: some is not defined
    console.log(anther); //

3.嵌套結構對象的解構

let pbj = {
    p: [
        x,
        {y:2}
    ]
};
let {p: [x, {y}]} = obj;
// 須要注意的是這裏的p是模式，不是變量，所以不會被賦值，由於:的關係

字符串的解構賦值

1.字符串用於解構賦值時，字符串會被轉換成爲一個相似數組的對象

let [a,b,c,d] = "abcd";

2.相似數組的對象都有一個length屬性，所以，也能夠對這個屬性解構賦值

let {length} = "hello"; //5

數值和布爾值的解構賦值

數組與布爾值進行解構賦值時，會先轉換爲對象。 以下所示：

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

函數參數的解構賦值

函數參數的解構賦值特色：
1.省略掉了let const等關鍵字
2.若是以數組，對象做爲模式時，注意默認參數實際上是模式，以下所示

function add([x,y]=[1,2]) {
  return x+y;
}

function move({x,y}={x:1, y:2}) {
  return [x, y]
}
move({x:1, y:3}); //[1,3]
move({x:1}); //[1, undefined]
move(); //[1, 3]
// 注意 
move({});  //[undefined, undefined] 這是由於，對象纔是默認參數，是對該對象解構賦值獲得x、y。
而不是爲x,y指定默認值

圓括號問題

不可使用圓括號的狀況：
1.聲明變量時，不能帶有圓括號 : let [(e)] = [1]
2.函數參數中，模式不能帶有圓括號 : function add([(a)]){}
3.賦值語句中，不能將整個模式，或嵌套模式中的一層，放在圓括號中: ([a]) = [5]

用途

1.交換變量值

[x,y]=[x,y]

2.從函數中返回多個值(僞)

function add() {
    return {
        a:1,
        b:2,
        c:3
    }
}
let {a,b,c} = add();

3.遍歷Map解構

let map = new Map();
// 只取key,注意Map遍歷返回的是[key,value]結構
for(let [key] of map){
    
}
//只取value
for(let [,value] of map){
    // some code
}