ES6學習之解構賦值實例詳解

一、解構賦值的定義

　　簡單的理解就是賦值=號左右兩側具有相同的結構，來進行一一對應的賦值的語句

二、解構賦值的分類

　　數組解構賦值 物件解構賦值 字串解構賦值 布林值解構賦值 函數參數解構賦值 數值解構賦值（ 重點理解前兩者就可以了）

三、對於每個分類單獨解釋

　　1、數組解構賦值（下面進行程式碼展示，並加入必要的註解便於理解）

{
  let a,b,rest;
  [a,b]=[1,2];
  console.log(a,b);//输出1,2 直接将1和2解构到a和b}

　　也可以對變數設定預設值例如下面程式碼的c 就是預設為3  如果解構例如[a,b,c]=[1,2] 沒有對c進行解構 則c為undefined

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

　　使用場景1

　　　　①、變數交換　　　

{
  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b);
}

　　　　②、先回傳值

　　　　②、先傳回值（先沒有解構值。取出結果然後透過索引來進行取出）　

{  function f(){return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);
}

　　　　③、只取出返回結果的某些需要的值

#

{  function f(){return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b); // 输出1 4
}

　　　　④、##

{  function f(){return [1,2,3,4,5]
  }
  let a,b,c;
  [a,...b]=f();
  console.log(a,b);//输出1,[2,3,4,5]
}

　　　　④、##

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);
}

　　　關心數組的內容長度

{
  let {a=10,b=5}={a:3};
  console.log(a,b);//输出3 5
}

　　2、物件解構賦值

{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'}]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);//abc test （相当于esTitle和cnTitle分别对应metaData里面的abc和test）
}

　　　物件解構賦值設定預設值

rrreee

　　　

#稍微複雜的物件的解構賦值###　　　#######rrreee####### ###

以上是ES6學習之解構賦值實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！