ES6之解構


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]);

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM