一、解構(gòu)過(guò)程
解構(gòu)是指在es6的規(guī)則中宜咒,允許從數(shù)組或變量中提取變量并對(duì)其進(jìn)行賦值的操作杉允,若在解構(gòu)不成功時(shí),會(huì)給變量賦值為undefined恬吕。而且解構(gòu)賦值有個(gè)規(guī)則就是,只要解構(gòu)等號(hào)的右邊值不是對(duì)象或數(shù)組须床,就先將其轉(zhuǎn)為對(duì)象铐料。但是undefined和null不能轉(zhuǎn)為對(duì)象,所以對(duì)它們進(jìn)行解構(gòu)賦值,都會(huì)報(bào)錯(cuò)钠惩。
1.數(shù)組
????最簡(jiǎn)單的就是 let [a,b,c] = [1,2,3];其中a,b,c的值分別是1柒凉,2,3篓跛,有個(gè)需要注意的地方膝捞,在數(shù)組中,元素的排列是有序的愧沟,所以解構(gòu)也是有順序的蔬咬,不可更改位置
2.對(duì)象
? ? let {a,b} = {a:'first',b:'second'} 此時(shí),a ,b的值分別為first 和 second 央渣;若let {a} = {f:"aaa",b:"bbb"};此時(shí)a的值將解構(gòu)不成功计盒,且被賦值為undefined。注意:在對(duì)象的解構(gòu)當(dāng)中芽丹,對(duì)象的屬性沒(méi)有次序北启,變量必須與對(duì)象的屬性同名,才能取到正確的值拔第。
3.字符串解構(gòu)
?????const [a,b,c,d,e] = 'hello咕村!'; 解構(gòu)后的對(duì)應(yīng)的值分別為'h','e','l','l','o';有個(gè)特殊的地方就是,類似數(shù)組的對(duì)象都有一個(gè)length屬性蚊俺,因此還可以對(duì)這個(gè)屬性解構(gòu)賦值懈涛,如let {length:len} = 'hello';輸出的len就是字符串的長(zhǎng)度。
4.數(shù)值和布爾值
? ? 由于解構(gòu)賦值的規(guī)則泳猬,只能對(duì)可以轉(zhuǎn)化為對(duì)象的變量操作批钠,故這種情況會(huì)報(bào)錯(cuò):
????let {prop:x} = undefined; // TypeError
????let {prop:y} = null; // TypeError
5.函數(shù)參數(shù)
function fun({x=0,y=0}={}){
????return[x,y];
}
move({x:3,y:8}); // [3, 8]
move({x:3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
[1,undefined,3].map((x='yes')=>x);輸出結(jié)果[ 1, 'yes', 3 ],undefined就會(huì)觸發(fā)函數(shù)參數(shù)的默認(rèn)值
二得封、解構(gòu)目的
1.交換變量
????通過(guò)解構(gòu)賦值操作埋心,可以實(shí)現(xiàn)不用任何中間變量的兩個(gè)變量值交換,[a,b] = [b,a];
2.實(shí)現(xiàn)函數(shù)返回多個(gè)值
? ? 在以前的函數(shù)中忙上,返回值只有一個(gè)拷呆,要么是一個(gè)對(duì)象,要么是一個(gè)數(shù)組或一個(gè)元素疫粥,現(xiàn)在我們利用解構(gòu)賦值可以這樣實(shí)現(xiàn)函數(shù)的多個(gè)返回值
? ? let [a,b,c] = function(){ return [1,2,3] },
3.使函數(shù)的參數(shù)一一對(duì)應(yīng)起來(lái)
4.提取后臺(tái)傳過(guò)來(lái)的json數(shù)據(jù)
? ? 利用解構(gòu)賦值茬斧,通過(guò)對(duì)象的有序排列和鍵值,可實(shí)現(xiàn)數(shù)據(jù)的一一對(duì)應(yīng)
????let json={
????????id:42,
????????status:"OK",
????????data:[867,5309]
????};
let? {id,status,data:number} = jsonData;
此時(shí)id,status,number的輸出結(jié)果分別為 42, "OK", [867, 5309]梗逮,實(shí)現(xiàn)了數(shù)據(jù)的一一對(duì)應(yīng)
5.可指定函數(shù)參數(shù)的默認(rèn)值
? ?以前我們?cè)诤瘮?shù)中傳一個(gè)參數(shù)foo,若此時(shí)沒(méi)有傳參项秉,就要加一個(gè)默認(rèn)值,需要這樣操作: var foo = config.foo || 'default foo';即foo的默認(rèn)值為'default foo'库糠,現(xiàn)在可以這樣:
????let fun = function (foo = 'default foo'){//more deals}
總結(jié):今天重溫了下變量的解構(gòu)賦值伙狐,簡(jiǎn)單記錄涮毫,避免遺忘。