ES6之解構
阿新 • • 發佈:2019-09-01
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]);
④模組的按需匯入 匯入指定的值
&n