1、在es5中我們進行相關賦值的時候，只能一個一個進行賦值，使用逗號的進行賦值也只是最右邊的賦值 才生效。在es6中出現了賦值解構，分兩種情況一個是數組解構，一個是對象解構賦值。這么好用的方法給我帶來很多便利。
- 數組解構賦值：
1 // //解構賦值：通過數組對應，對變量進行對應賦值。 2 let [a,c,v,b]=[1,2,3,4]; 3 console.log(a,c,v,b); 4 //這種賦值叫做 模式匹配。只要等號兩邊結構一樣就可以進行賦值。 5 let [k,[[n],d]]=[1,[[2],3]]; 6 console.log(k,n,d); 7 //如果解構不成功，對應變量值為undefined; 8 let [l,m]=[1]; 9 console.log(m); 10 //不完全解構，如果等號左邊沒有全部匹配右邊也是可以結構成功的。 11 let [vv,vb,vc]=[1,2,3,4]; 12 console.log(vv,vb,vc); 13 //變量結構需要等號右邊需要itrator結構，也就是說具備可以被迭代。否則解構不成功。 14 try { 15 // let [cc]=2;//右邊並不是數組 TypeError: 2 is not iterable 16 let [dd]={};//不具備iteraor 所以解構也不成功。TypeError: {} is not iterable 17 }catch (e) { 18 console.log(e) 19 }
1 // 解構允許有默認值。 2 let [a1,a2=2]=[1]; 3 console.log(a1,a2); 4 // 需要注意的是在es6內部使用的是嚴格相等來判斷一個位置是否有值。只有當數組中的成員嚴格等於undefined 默認值才能生效。 5 // 如果默認值里是null，因為null不嚴格等於undefined 所有默認值也不會生效。 6 let [a=2]=[null]; 7 console.log(a);//a=null 8 // 如果默認值是表達式，這個表達式是惰性求值。只有用到的時候才會求值。 9 fn=()=>{ 10 return 2; 11 }; 12 13 let [a=fn()]=[1]; 14 console.log(a); 15 //只有a對應的右邊的位置的值為undefined的時候，才會執行fn，否則不會執行相當於： 16 let x; 17 x=[1][0]===undefined?fn():[1][0];//只有在對應的右邊的元素為undefined的時候才會計算表達式。和函數的默認為表達式也是惰性求值。
1 // 默認值也可以是其他結構解構的變量，但是對應的變量需要提前聲明，否則會報錯。 2 try { 3 let [ov,oc=ov]=[1]; 4 console.log(ov,oc); 5 let [k1=k2,k2]=[undefined,2]; 6 console.log(k1,k2);//ReferenceError: Cannot access 'k2' before initialization 7 }catch (e) { 8 console.log(e) 9 }
- 對象解構賦值：對象解構，語法解構：let {匹配字符:變量名}={匹配字符:變量值} 例如：let {a:c}={a:2,c=3} ，我們常常用縮寫形式let {c}={c:2} 縮寫形式，匹配的字符和變量是一樣的。
1 //對象解構：對象解構不需要位置和數組解構位置一致，只要保證解構的變量名和屬性一致即可。 2 let {a,c}={c:4,a:2}; 3 console.log(a,c); 4 //如果解構失敗，變量賦值為undefined. 5 let {acd}={f:2}; 6 console.log(acd);
- 對象解構還有一個常用的功能，就是取js的一些方法，類似python的反射功能。
1 // 我們在使用對象解構的時候，可以獲取對應的對象的方法類似有點想python的反射 2 let {log}=console; 3 log(222); 4 //對象解構 上面的例子都是簡寫形式。實際上是如下：//也就是說：a是匹配的關鍵字 而真正的白能量是c. 5 let {a:c}={a:2,c:4}; 6 console.log(c)
- 對象解構嵌套解構對象，這種情況下對應嵌套的解構匹配屬性不能省略。
//在解構的時候，我們也可以用在解構中嵌套解構對象，也就是說可以在對象解構中嵌套數組解構 這種情況嵌套對象的屬性不能省略匹配的同名屬性。 let {ac:ac,ff:[c,a]}={ac:22,ff:[1,2]}; console.log(ac,c,a);