一、解構(gòu)過程
解構(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ù)組
????最簡單的就是 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ì)象的屬性沒有次序，變量必須與對(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就是字符串的長度。
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.交換變量
????通過解構(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)起來
4.提取后臺(tái)傳過來的json數(shù)據(jù)
? ? 利用解構(gòu)賦值，通過對(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í)沒有傳參，就要加一個(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)賦值，簡單記錄，避免遺忘。
