1. 程式人生 > >ES6之解構

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

④模組的按需匯入  匯入指定的值

&n