ES6允許按照一定的模式投放,從數(shù)組和對(duì)象中提取值蒋荚,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)戈钢。解構(gòu)賦值在實(shí)際開發(fā)中可以大量減少我們的代碼量痹仙,并且讓我們的程序結(jié)構(gòu)更清晰。
<b>數(shù)組的解構(gòu)賦值</b>
以前我們?yōu)樽兞抠x值殉了,只能直接指定值开仰。比如以下的代碼:
let a=1;
let b=2;
let c=3;
現(xiàn)在我們可以用數(shù)組解構(gòu)的方式來(lái)進(jìn)行賦值。
let [a,b,c] = [1,2,3];
上面的代碼薪铜,是安裝位置的對(duì)象關(guān)系對(duì)應(yīng)變量賦值众弓。注意在賦值的時(shí)候,等號(hào)左邊和右邊的形式要統(tǒng)一隔箍,不統(tǒng)一解構(gòu)將失敗谓娃。
let [a,b,[c,d,e],f] = [0,1,[2,3,4],5];
如果等號(hào)兩邊形式不一樣,很可能獲得Undefined或者直接報(bào)錯(cuò)蜒滩。
解構(gòu)賦值是允許使用默認(rèn)值的滨达。
let [ t =true] = [ ];
console.log(t); //true
let [ a,b,c=" zqq"] = ['i','am' ];
console.log(a+b+c); // i am zqq
另外需注意,undefined相當(dāng)于什么都沒有帮掉,null相當(dāng)于有值弦悉,但值為null。
<b>對(duì)象的解構(gòu)賦值</b>
解構(gòu)不僅可以用于數(shù)組還可以用于對(duì)象蟆炊。
let {cat,dog} = {cat:'Mike','dog':'John'};
console.log(cat+dog); //MikeJohn
<b>注意:</b>對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同稽莉,數(shù)組的元素是按次序排列的,變量的取值由它的位置決定涩搓;而對(duì)象的屬性沒有次序污秆,變量必須與屬性同名劈猪,才能取到正確的值。
另外良拼,如果在解構(gòu)之前就定義了變量战得,這時(shí)候你再解構(gòu)會(huì)出現(xiàn)問題,編譯會(huì)出錯(cuò)。
let cat;
{cat} = {cat : 'Mike'};
console.log(cat);
要解決報(bào)錯(cuò)庸推,使程序正常常侦,只要在解構(gòu)的語(yǔ)句外包加一個(gè)圓括號(hào)就可以了。
let cat;
({cat} = {cat : 'Mike'});
console.log(cat);
<b>字符串解構(gòu)</b>
字符串解構(gòu)相當(dāng)于字符串被轉(zhuǎn)換成了一個(gè)類似數(shù)組的對(duì)象贬媒。
const [a,b,c,d] = "Mike";
console.log(a); //M
console.log(b); //i
console.log(c); //k
console.log(d); //e