解構(gòu)(Destructuring)
ES6 允許從數(shù)組和對(duì)象中提取值砰盐,對(duì)變量進(jìn)行賦值趁怔,這被稱為解構(gòu)(Destructuring)坐儿。
let [a, b, c] = [1, 2, 3];
本質(zhì)上,這種寫(xiě)法屬于“模式匹配”贝乎,只要等號(hào)兩邊的模式相同或者可以匹配上情连,左邊的變量就會(huì)被賦予對(duì)應(yīng)右邊的值。
let [first, [[second], third]] = [1, [[2], 3]];
first // 1
second // 2
third // 3
let [ , , third] = ["first", "second", "third"];
third // "third"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
如果變量匹配不上導(dǎo)致解構(gòu)不成功览效,變量的值就等于undefined却舀。一般解構(gòu)不成功是因?yàn)榈忍?hào)右邊的值無(wú)法匹配上等號(hào)左邊的變量。
要是等號(hào)左邊的變量只能匹配到部分等號(hào)右邊的值锤灿,稱為不完全解構(gòu)
let [foo] = []; //undefined
let [first, foo] = [1]; //foo is undefined
針對(duì)數(shù)組的解構(gòu)挽拔,如果等號(hào)右邊的值是不可遍歷的,則解構(gòu)時(shí)會(huì)報(bào)錯(cuò)但校。
// 以下均會(huì)報(bào)錯(cuò)
let [foo] = 1;
let [foo] = false;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
解構(gòu)不僅可以用在數(shù)組上螃诅,也可以用在對(duì)象中。對(duì)象的解構(gòu)與數(shù)組不一樣的地方在于状囱,數(shù)組解構(gòu)時(shí)嚴(yán)格按照順序進(jìn)行匹配术裸,而對(duì)象則需要按照同名的屬性進(jìn)行匹配。
let { first, second } = { first: '111', second: '222' };
first // "111"
second // "222"
需要注意的是亭枷,因?yàn)閿?shù)組本質(zhì)是特殊的對(duì)象穗椅,因此可以對(duì)數(shù)組進(jìn)行對(duì)象屬性的解構(gòu)。
let arr = [1, 2, 3];
let {0 : first, 2 : third} = arr;
first // 1
third // 3