第五节：一个令人兴奋的ES6新特性：解构赋值
????????端午節剛剛過，大家是回家陪家人吃粽子，還是約好朋友一起出去浪了？昨天上了一天班，不知道大家有沒有把出去玩耍的心思收回來，準備接下來的學習。
????????繼續學習吧騷年們......
?
????????學完了前4節，今天我給大家帶來的是一個令人興奮的特性：解構賦值。這個章節代碼片段有點偏多，不過可以放心，一點都不燒腦，還是老樣子：簡單易懂。
什么是解構賦值
?
????????按照一貫的套路，接下來的內容是解釋：什么是解構賦值？
?
????????來看看官方的解釋：
ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。
?
????????這句話也不難理解，但是前端君怎么會這么敷衍了事，隨便貼一段官方的文字解釋就算呢。
?
??????? 來，我們來上一段代碼進一步解釋一下什么叫解構賦值。
關于給變量賦值，傳統的變量賦值是這樣的：
????var arr = [1,2,3];//把數組的值分別賦給下面的變量；
????var a = arr[0];
????var b = arr[1];
????var c = arr[2];
????console.log(a);//a的值為1
????console.log(b);//b的值為2
????console.log(c);//c的值為3
?
????????
????????將數組的元素值1，2，3分別賦值給變量a，b，c，結果也是如我們所愿，賦值成功，這是一種傳統的賦值方式。
????????我們今天要介紹解構賦值會是怎樣的？一起往下看。?
?
變量的解構賦值：
????var [a,b,c] = [1,2,3]; //把數組的值分別賦給下面的變量；
????console.log(a);//a的值為1
????console.log(b);//b的值為2
????console.log(c);//c的值為3
????????
????????注意到了嗎？賦值的代碼大大減少了，不需要分別把變量a，b，c分別聲明定義和賦值，只需要將變量a，b，c作為一個數組的元素，然后將數組[1,2,3]賦值給數組[a,b,c]即可，變量a，b，c即可分別得到對應的值。
?
????????看吧，代碼是不是簡短了很多，可讀性也很強，這種叫做數組的解構賦值。
????????????????????????
數組的解構賦值
????????數組的解構賦值的用法有以下幾情況要注意：
1、結構賦值可以嵌套的
????var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];
????console.log(c1);//結果：c1的值為3.1
????console.log(c2);//結果：c2的值為3.2
????????
????????如我們的預料，數組中即使再嵌套另一個數組，結構賦值也能為我們的變量準確的賦值，c1和c2的值分別為3.1 , 3.2，也就是賦值成功。
2、不完全解構
????var [a,b,c] = [1,2];
????console.log(a);//結果：a的值為1
????console.log(b);//結果：b的值為2
????????
????????當左邊的模式（你可以理解為格式）與右邊不完全一樣的時候，那么賦值過程中，只會給模式匹配成功的部分的變量賦值，例如：變量c沒有在右邊找到匹配的模式，所以無法進行賦值，但這并不影響變量a和變量b的賦值，因為它們在右邊找到與之匹配的模式，這種叫做不完全解構。
3.????賦值不成功，變量的值為undefined
????var [a,b,c] = [1,2];
????console.log(a);//結果：a的值為1
????console.log(b);//結果：b的值為2
????console.log(c);//結果：c的值為undefined
????????
????????還是接著上面的不完全解構例子講解，變量a和變量b為不完全解構，那么變量c解構不成功會怎么樣呢？記住，解構不成功，變量的值就等于undefined。相當于只聲明了變量c，但是沒賦值。
4.????允許設定默認值
????var [a,b,c=3] = [1,2];
????console.log(a);//結果:a的值為1
????console.log(b);//結果:b的值為2
????console.log(c);//結果:c的值為3
????????
????????例子中變量c已經指定默認值為3，即使右側沒有與之對應的值賦給它也沒關系，它都可以成功賦值為3，如果你想覆蓋默認值3，只需賦一個有效的值即可。如下：
????var [a,b,c=3] =[1,2,4];
????console.log(a);//結果:a的值為1
????console.log(b);//結果:b的值為2
????console.log(c);//結果:c的值為4
????????
????????這個時候默認值3會被新的值4覆蓋，c的值為4；注意：當新的值為undefined的時候，是不會覆蓋默認值的。
?
????????以上是數組的解構賦值，除了利用數組可以解構賦值外，用JSON對象也可以。
?
對象的解構賦值?
????????
????????對象的解構賦值跟數組的解構賦值很類似，我們來看一段小代碼：?
????var { a,b,c} = {"a":1,"b":2,"c":3};
????console.log(a);//結果：a的值為1????
????console.log(b);//結果：b的值為2
????console.log(c);//結果：c的值為3
?????????
????????這段例子的代碼是不是跟數組的解構賦值很相似，只不過是數組換成了對象。但是兩者有一個不同的地方，我們對上面的代碼稍做修改：
????var { a,b,c } = {"a":1,"c":3,"b":2};
????console.log(a);//結果：a的值為1
????console.log(b);//結果：b的值為2
????console.log(c);//結果：c的值為3
????????
????????我把右側的對象屬性b和屬性c的位置進行了調換，但這并不會影響賦值的結果，變量b和變量c的值不會改變，依然是b為2，c為3。這就告訴我們對象的解構賦值不會受到屬性的排列次序影響（數組則會受影響），它是跟屬性名關聯起來的，變量名要和屬性名一致，才會成功賦值。
?????
????????如果變量找不到與其名字相同的屬性，就會賦值不成功，如下面的例子：
????var { a } = {"b":2};
????console.log(a);//結果：a的值為undefined
????????
????????變量a在右側找不到與之名字匹配的屬性a，所以變量a賦值不成功，a的值為undefined。
?
????????但也不是完全沒有辦法補救的，如果你想給一個變量名與屬性名不一樣的變量解構賦值，可以這樣寫：
????var { b:a,} = {"b":2};
????console.log(a);//結果：a的值為2
????????
????????這樣變量a同樣可以賦值成功，a的值最終為2。
?
????????對象的解構賦值的用法與數組的解構賦值也很類似：
1、對象解構賦值也可以嵌套
????var {a:{b}} = {"a":{"b":1}};
????console.log(b);//結果：b的值為1
2、可以指定默認值
????var {a,b=2} = {"a":1};
????console.log(b);//結果：b的值為默認值2
字符串的解構賦值
?
????????除了對象和數組可以解構賦值外，字符串也可以這么玩，看看下面的例子：
????var [a,b,c,d,e,f] = "我就是前端君";
????console.log(a);//我
????console.log(b);//就
????console.log(c);//是
????console.log(d);//前
????console.log(e);//端
????console.log(f);//君
????????
????????這是因為在解構賦值的過程中，字符串被轉換成了一個類似數組的對象。變量a，b，c，d，e，f都分別賦上了對應的值。
解構賦值的用途
?
????????介紹了這么多解構賦值的用法，最重要的還是要介紹它的用途。
一、交換變量的值
傳統做法最常用的是引入第三個變量來臨時存放，如下：
????var x = 1;
????var y = 2;
????var z = x;//第三個變量臨時存放x的值
????x = y;? //把y的值賦給x；
????y = z;? //把z的值賦值給y；
????console.log(x); //結果：x為2
????console.log(y); //結果：y為1
????????但是有了解構賦值，想交換兩個變量的值就簡單多了。看下面的代碼：
????var x = 1;
????var y = 2;
????[x,y] = [y,x];
????????簡單的一句代碼即可成功交換x，y的值。
?
二、提取函數返回的多個值
????????函數只能返回一個值，我們可以將多個值裝在一個數組或者對象中，再用解構賦值快速提取其中的值。
????function demo(){
??????? return {"name":"張三","age":21}
????}
????var {name,age} = demo();
????console.log(name);//結果：張三
????console.log(age);//結果：21
????????
????????將demo函數的運行結果直接通過結構賦值賦給變量name和age，實現快速的提取對應的值。
?
三、定義函數參數
????function demo({a,b,c}){
??????? console.log("姓名："+ a);
??????? console.log("身高："+ b);
??????? console.log("體重："+ c);
????}
????demo({a:"張三",b:"1.72m",c:"50kg",d:"8000"});
????????
????????通過這種寫法， 很方便就能提取JSON對象中想要的參數，例如案例中，我們只需要獲取實參中的：a，b，c，而不需要關其他的參數，比如：d或者其他更多的參數。
?
?
四、函數參數的默認值
????????傳統的參數默認值的實現方式是，先判斷該參數是否為undefined，如果是代表沒傳，需要手動給它賦一個值，如：
????function demo(a){
??????? var name;
??????? if(a === undefined){//判斷參數書否是否傳值
?????? name= "張三"; //沒傳，賦默認值
???? }else{
??????????? name= a;
??????? }
??????? console.log(name);
????}
但是有了解構賦值，一切都變得簡單很多！看下面的代碼：
?
????function demo({name="張三"}){
??????? console.log("姓名："+name);//結果：姓名：張三
????}
????demo({});
????????
????????上面的代碼給我們展示了通過解構賦值設定函數參數的默認值，簡潔地代碼即可實現。函數調用的時候沒有傳入對應的name參數，此時name就會使用默認值：“張三”，是不是很簡潔很方便....
?
????????以上介紹了解構賦值的4個用途，你是不是也感覺到了它給我們帶來的方便，它使我們的代碼量大大的減少，并且語法十分清晰，增加了代碼的可讀性和表現力。
?
????????除了這些用途以外，解構賦值在其他領域都有很好的應用，因為涉及到ES6的其他新知識，就放在在后面的教程再展開講解。
本節總結
?
總結：解構賦值給我們一種新的變量賦值方式，主要可以利用數組解構賦值和對象解構賦值。它的用途包括：交換變量值，提取函數返回值，函數參數定義，默認值設定等等，都給我們編程帶來便利，在未來的代碼中會見到越來越多人使用這個新特性。
總結
以上是生活随笔為你收集整理的第五节：一个令人兴奋的ES6新特性：解构赋值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android build.time,A
- 下一篇： [云炬创业基础笔记]第十一章创业计划书测