1、ES6允許按照一定的模式,從數組中和對象中提取值,對變量進行賦值,這種稱為解構(Distructuring);
let [a,b,c] = [3,5,6];// 相當於 a=3,b=5,c=6
本質上,這種寫法屬於“模式匹配”,只要等號兩邊的模式相同,左邊的變量就會被賦予對應的值。如果解構不成功,變量的值就等於 undefined
另一種情況是不完全能解構,即等號左邊的模式,只匹配一部分等號右邊的數組。這種情況下,解構依然可以成功。
2、數組的解構賦值
完全解構:
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
3、對象解構賦值
①解構變量名必須存在於對象屬性中,這樣才能取到值;
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
4、字符串的解構賦值
①解構時,字符串被轉換成一個類似數組的對象。
const [a,b,c]='zjl' // a='z',b='j',c='l'
②對字符串的length屬性進行解構
let {length}='hello' //length=5
5、數組和布爾值解構賦值
解構時,如果等號右邊是數值和布爾值,則會先轉為對象
let {toString: s} = 123; //函數 s === Number.prototype.toString true
let {toString: s} = true; //函數 s === Boolean.prototype.toString true
6、解構賦值的用途
① 交換變量的值
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]);
④模塊的按需導入 導入指定的值