ES6 解構賦值

什麼是解構賦值? 一種另類且簡便的變量賦值方式

什麼樣的數據能夠被解構?可迭代數據或者存在相應的包裝類型的數據
(JavaScript中的包裝類型：Object、Array、Date、Function、Error、RegExp、Math、Number、String、Boolean、Globle)

---

主要介紹經常使用的三種類型的解構賦值:

• 解構數組
• 解構對象
• 解構字符串

---

1.解構數組 -- 嚴格按照源數組index,對變量賦值

//一維數組
let [one,two,three] = [1,2,3];
one //1
two //2
three //3

//多維數組
let [x,y] = [[12],[12,34,56]];
x //[12]
y //[12,34,56]

//不須要賦值的index能夠跳過
let [z,,,h] = [1,2,3,[23,45,76]];
z //1
h //[23,45,76]

//沒有匹配數據時，返回undefined
let [i,j] = [1];
i //1
j //undefined
----------
//能夠設置默認值 -- 當某一個位置數據 === undefined,則會選取默認值進行賦值
let [x,y=22] = [1];
let [z=33] = [undefined];
let [h=44] = [null];
y //22
z //33
h //null

//惰性求值
function foo(){
    console.log('lazy evaluation');
    return 33;
}
let [k = foo()] = [1];
let [m = foo()] = [];

k //1 
//-- 此種狀況下不會執行foo函數，相似於 || ,
//先找尋是否有值可取，沒有的狀況尋求默認值，也就是執行foo()
m //33

---

2.解構對象 -- 嚴格根據屬性名提取對應的值 ,對變量的順序沒有任何要求

//基本用法
let {user,pwd,valid} = {user:'babe',pwd:'123456'};
user //"babe"
pwd //"123456"
valid //undefined

//變量名與屬性名不一致的狀況，須要定義別名
let {user:u,pwd:p,valid:v} = {user:'babe',pwd:'123456',valid:'xf3g'};
u // "babe"
p //"123456"
v // "xf3g"

//引伸出對象解構賦值的全寫形式 -> 省略別名,變量名默認就跟屬性名一致了
({user:user,pwd:pwd,valid:valid} = {user:'babe',pwd:'123456',valid:'xf3g'})
//{屬性名:變量名} <=> {user:u}  最終咱們使用的是變量名,即 u 

----------
//解構嵌套結構的對象 --嗯，要時刻謹記{屬性名:變量名}這種模式
//根據元對象,可變換着進行解構
let obj = {
  repo:{
    qty:1000,
    settleAmount:3000
  }
};
let {repo:{qty:number,settleAmount:account}} = obj
number //1000 
account //3000
//要得到repo,則要下面這種方式
let {repo,repo:{qty,settleAmount}} = obj;
repo //{qty: 1000, settleAmount: 3000}
qty //1000
settleAmount //3000

//解構失敗,當前變量爲undefined.若是繼續在當前變量下面繼續解構，則報錯
//就好像一個對象爲undefined,仍然去獲取對象的屬性 -- 報錯無疑
let {user:{name}} = {pwd:'123456'};
//Uncaught TypeError: Cannot destructure property `name` of 'undefined' or 'null'.

---

3.解構字符串 -- 字符串被轉換成一個類數組對象，因此解構跟數組同樣

let [i,j] = "BO";
i //"B"
j //"O"

---

用途:

交換變量值
[x,y] = [y,x];

導入部分模塊的功能
import {Component} from '@angular/core';

少寫不少代碼一些代碼 -- 獲取返回值數據的時候可直接解構,避免建立沒必要要的臨時變量
//res = {status:200,data:[...]}
let {status,data} = res;

---

若是bug,請指正Thanks♪(･ω･)ﾉ