解構(gòu)賦值是對(duì)賦值運(yùn)算符的擴(kuò)展。是一種針對(duì)數(shù)組或者對(duì)象進(jìn)行模式匹配嘁字,然后對(duì)其中的變量進(jìn)行賦值夫椭。
數(shù)組的解構(gòu)賦值
ES6
中可以從數(shù)組中提取值掸掸,對(duì)變量進(jìn)行賦值,這種過(guò)程稱為解構(gòu)蹭秋。
示例:
例如下面這個(gè)例子扰付,從數(shù)組中提取值,按照對(duì)應(yīng)位置仁讨,對(duì)變量賦值:
let [x, k, d] = [1, 2, 3];
console.log(x); // 輸出:1
console.log(k); // 輸出:2
console.log(d); // 輸出:3
這種寫(xiě)法屬于模式匹配羽莺,只要等號(hào)兩邊的模式相同,就會(huì)將右邊的值賦給左邊的變量洞豁。
嵌套數(shù)組解構(gòu)
在 ES6
中嵌套數(shù)組也可以進(jìn)行解構(gòu)盐固。
示例:
let [x, [[k], d]] = [1, [[20], 3]];
console.log(x); // 輸出:1
console.log(k); // 輸出:20
console.log(d); // 輸出:3
不完全解構(gòu)
在解構(gòu)數(shù)組時(shí)我們可以忽略某個(gè)值。例如下面這個(gè)例子中丈挟,右邊有三個(gè)值刁卜,如果我們只想要將第二個(gè)值賦給指定變量,其他值不進(jìn)行賦值礁哄,可以像下面這個(gè)寫(xiě):
let [, x, ] = [1, 2, 3];
console.log(x); // 輸出:2
剩余運(yùn)算符长酗,例如下面這個(gè)例子,變量 a
被賦值為 1
桐绒,其他的值都被賦給了 ...b
:
let [a, ...b] = [1, 2, 3, 4, 5];
console.log(a); // 輸出:1
console.log(b); // 輸出:[ 2, 3, 4, 5 ]
字符串解構(gòu)賦值
字符串的解構(gòu)可以理解為一維數(shù)組的解構(gòu)夺脾,這在處理符串的時(shí)候特別方便之拨。
示例:
let [a, b, c] ='123'
console.log(a, b, c); // 輸出:1 2 3
console.log(typeof a); // 輸出:string
字符串對(duì)象也有一個(gè) length
屬性,因?yàn)槲覀兛梢詫?duì)這個(gè)屬性解構(gòu)賦值咧叭。
let {length : len} = 'hello, xkd';
console.log(len); // 輸出:10
數(shù)值和布爾值的解構(gòu)賦值
在解構(gòu)賦值時(shí)蚀乔,如果等號(hào)右邊的值時(shí)數(shù)值或布爾類(lèi)型,會(huì)先轉(zhuǎn)換為對(duì)象菲茬,然后再進(jìn)行賦值吉挣。
示例:
let {toString: a} = 100;
console.log(a === Number.prototype.toString); //輸出:true
let {toString: b} = true;
console.log(b === Boolean.prototype.toString); // 輸出:true
對(duì)象的解構(gòu)賦值
對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同,數(shù)組的元素是按次序排列的婉弹,變量的取值由它的位置決定睬魂。而對(duì)象的屬性沒(méi)有次序,變量必須與屬性同名镀赌,才能取到正確的值氯哮。
示例:
let { a, b, c} = { a: 1, b: 2};
console.log(a, b, c); // 輸出:1 2 undefined
上述代碼中,等號(hào)左邊的前兩個(gè)變量 a商佛、b
與右邊的對(duì)象屬性名相同喉钢,所以成功取到對(duì)應(yīng)的值。而變量 c
沒(méi)有對(duì)應(yīng)的同名屬性良姆,導(dǎo)致取不到值肠虽,最后結(jié)果為 undefined
。
如果變量名與屬性名不一致玛追,還有一種方法能夠成功取到值税课,例如像下面這個(gè):
let { first: f, second: s } = { first:100, second:200 };
// 輸出變量的值
console.log(f); // 輸出:100
console.log(s); // 輸出:200
上述代碼中,first
和 second
是匹配的模式豹缀,f
和 s
才是變量伯复,真正被賦值的是變量 f
和 s
慨代。
和數(shù)組一樣的是邢笙,解構(gòu)也可以用于嵌套結(jié)構(gòu)的對(duì)象。
示例:
例如下面這個(gè)例子:
let obj = {
stu: [
'xkd',
{ age: 18 }
]
};
let { stu: [name, { age }] } = obj;
console.log(name, age); // 輸出:xkd 18
注意這時(shí) stu
是模式侍匙,不是變量氮惯,因此不會(huì)被賦值。如果 stu
也要作為變量賦值想暗,可以寫(xiě)成下面這樣妇汗。
let obj = {
stu: [
'xkd',
{ age: 18 }
]
};
let { stu, stu: [key, { age }] } = obj;
console.log(stu); // 輸出:[ 'xkd', { age: 18 } ]
console.log(key); // 輸出:xkd
console.log(age); // 輸出:18
函數(shù)參數(shù)的解構(gòu)賦值
除了數(shù)組、字符串说莫、對(duì)象等數(shù)據(jù)類(lèi)型杨箭,在 ES6
中函數(shù)的參數(shù)也可以使用解構(gòu)賦值储狭。
示例:
例如下面這個(gè)例子:
function add([x, y]){
console.log(x + y);
}
add([3, 7]); // 輸出:10
上述代碼中捣郊,函數(shù) add
的參數(shù)表面上是一個(gè)數(shù)組,但在傳入?yún)?shù)的那一刻慈参,數(shù)組參數(shù)就被解構(gòu)成變量 x
和 y
。對(duì)于函數(shù)內(nèi)部的代碼來(lái)說(shuō)驮配,它們能感受到的參數(shù)就是 x
和 y
。
默認(rèn)值
解構(gòu)賦值允許指定默認(rèn)值壮锻。有一點(diǎn)需要注意的是琐旁,即使設(shè)置了默認(rèn)值,在進(jìn)行解構(gòu)賦值時(shí)猜绣,依舊會(huì)先賦值旋膳,如果沒(méi)有賦值成功,則會(huì)使用默認(rèn)值途事。如果沒(méi)有默認(rèn)值結(jié)果為 undefined
验懊。
示例:
let [a=1, b=2, c=3, d] = [100, 200];
console.log(a, b, c, d);
//輸出:100 200 3 undefined
上述代碼中,a尸变、b义图、c
都指定了默認(rèn)值,但是只有 a召烂、b
被成功賦值為 100碱工、200
,c
沒(méi)有被賦值奏夫,那么 c
會(huì)使用指定的默認(rèn)值怕篷。而 d
既沒(méi)有被賦值,也沒(méi)有默認(rèn)值酗昼,所以結(jié)果為 undefined
廊谓。