ES6變量的解構賦值-ES6連載3

• 基本用法

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。

• 關於給變量賦值，傳統的變量賦值是這樣的：

var arr = [100,200,300];//把數組的值分別賦給下面的變量；
var a = arr[0];
var b = arr[1];
var c = arr[2];

console.log(a);//a的值爲100
console.log(b);//b的值爲200
console.log(c);//c的值爲300

//將數組的元素值100，200，300分別賦值給變量a，b，c，結果也是如我們所願，賦值成功，這是一種傳統的賦值方式。

• 變量的解構賦值（ES6 允許寫成這樣的形式）：

var [a,b,c] = [100,200,300]; //把數組的值分別賦給下面的變量；
console.log(a);//a的值爲100
console.log(b);//b的值爲200
console.log(c);//c的值爲300

//賦值的代碼大大減少了，不需要分別把變量a，b，c分別聲明定義和賦值，只需要將變量a，b，c作爲一個數組的元素，然後將數組[100,200,300]賦值給數組[a,b,c]即可，變量a，b，c即可分別得到對應的值。

數組的解構賦值

• 結構賦值可以嵌套的

var [ a,b,[ c1,c2 ] ] = [ 100,200,[ 310,320 ] ];
console.log(c1);//結果：c1的值爲310
console.log(c2);//結果：c2的值爲320

• 不完全解構

var [a,b,c] = [100,200];
console.log(a);//結果：a的值爲100
console.log(b);//結果：b的值爲200
//當左邊的模式（你可以理解爲格式）與右邊不完全一樣的時候，那麼賦值過程中，只會給模式匹配成功的部分的變量賦值

• 賦值不成功，變量的值爲undefined

var [a,b,c] = [100,200];
console.log(a);//結果：a的值爲100
console.log(b);//結果：b的值爲200
console.log(c);//結果：c的值爲undefined
//解構不成功，變量的值就等於undefined

• 允許設定默認值

var [a,b,c=300] = [100,200];
console.log(a);//結果:a的值爲100
console.log(b);//結果:b的值爲200
console.log(c);//結果:c的值爲300
//變量c已經指定默認值爲300，即使右側沒有與之對應的值賦給它也沒關係，它都可以成功賦值爲300，如果你想覆蓋默認值300，只需賦一個有效的值即可

var [a,b,c=3] =[100,200,400];
console.log(a);//結果:a的值爲100
console.log(b);//結果:b的值爲200
console.log(c);//結果:c的值爲400
//這個時候默認值3會被新的值400覆蓋，c的值爲400；注意：當新的值爲undefined的時候，是不會覆蓋默認值的。

對象的解構賦值

• 對象的解構賦值跟數組的解構賦值很類似 

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
//對象的解構賦值不會受到屬性的排列次序影響（數組則會受影響），它是跟屬性名關聯起來的，變量名要和屬性名一致，纔會成功賦值。

• 如果變量找不到與其名字相同的屬性，就會賦值不成功

var { a } = {"b":2};
console.log(a);//結果：a的值爲undefine

• 如果你想給一個變量名與屬性名不一樣的變量解構賦值\

var { b:a,} = {"b":2};
console.log(a);//結果：a的值爲2
//這樣變量a同樣可以賦值成功，a的值最終爲2

• 對象解構賦值也可以嵌套

var {a:{b}} = {"a":{"b":1}};
console.log(b);//結果：b的值爲1

• 可以指定默認值

var {a,b=2} = {"a":1};
console.log(b);//結果：b的值爲默認值2

字符串的解構賦值

var [a,b,c,d,e] = "我是大帥哥";
console.log(a);//我
console.log(b);//是
console.log(c);//大
console.log(d);//帥
console.log(e);//哥
//這是因爲在解構賦值的過程中，字符串被轉換成了一個類似數組的對象。變量a，b，c，d，e都分別賦上了對應的值。

解構賦值的用途

• 交換變量的值

//傳統做法最常用的是引入第三個變量來臨時存放
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];

• 提取函數返回的多個值

//函數只能返回一個值，我們可以將多個值裝在一個數組或者對象中，再用解構賦值快速提取其中的值。
function demo(){
  return {"name":"張三","age":21}
}
var {name,age} = demo();
console.log(name);//結果：張三
console.log(age);//結果：21

• 定義函數參數

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就會使用默認值：“張三”