ES6之解構

一、ES6容許按照必定的模式，從數組中和對象中提取值，對變量進行賦值，這種稱爲解構（Distructuring）；

let [a,b,c] = [3,5,6];// 至關於 a=3,b=5,c=6

本質上，這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。若是解構不成功，變量的值就等於 undefined

另外一種狀況是不徹底能解構，即等號左邊的模式，只匹配一部分等號右邊的數組。這種狀況下，解構依然能夠成功。

二、數組的解構賦值

徹底解構：

let [a,b,c] = [6,7,8]; // a=6,b=7,c=8

不徹底解構

let [a,[b],c] = [2,[4,6],7];　　// a=2,b=4,c=7

集合解構：

let [head,...tail] = [1,3,4,5,6];  // head= 1,tail=[3,4,5,6]

可設置默認值（默認值也能夠是函數）：

let [x,y='b']=['a'];   //x=a,y=b

三、對象解構賦值

①解構變量名必須存在於對象屬性中，這樣才能取到值；

let {name,age}={name:'zjl',age:18} //name='zjl',age=18  注意：左側變量名必須在對象屬性名中

②若是變量名與屬性名不一致，必須寫成下面這樣，重命名

let {name:username,age}={name:'zjl',age:18}   // username='zjl',age=18

③根據第二點可知，解構賦值是如下方式的簡寫

let {name:name,age:age}={name:'zjl',age:18}   //因此當對象屬性名和屬性值相等時能夠簡寫

④ 嵌套解構

let {p:[x,{y}]}={p:['hello',{y:'world'}]} // x=hello,y=world

⑤對象 解構也能夠設置默認值

let {x:y=9}={10}   //y=9

四、字符串的解構賦值

①解構時，字符串被轉換成一個相似數組的對象。

const [a,b,c]='zjl'   // a='z',b='j',c='l'

②對字符串的length屬性進行解構

let {length}='hello'   //length=5

五、數組和布爾值解構賦值

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

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

六、解構賦值的用途

① 交換變量的值

let x = 1; let y = 2; [x, y] = [y, x];

②函數返回值

function example() { return [1, 2, 3]; }
let [a, b, c] = example();

③函數參數的定義

function f([x, y, z]) { ... }
f([1, 2, 3]);

④模塊的按需導入  導入指定的值