為什么要使用解構
var obj = {
name:'Jon',
age:22
};
var name = obj.name;
var age = obj.age;
上面代碼是我們以前開發時經常要使用的，從對象和數組中獲取數據，并給變量賦值；當對象和數組的數據結構比較復雜時，這種方法就比較麻煩了，有時需要一個個或者遍歷；所以ES6添加了解構功能；將數據結構打散的過程變得更加簡單，可以從打散后更小的部分中獲取所需的信息。
數組解構
1、基本用法
以前，為變量賦值：
let a = 1;
let b = 2;
let c = 3;
ES6賦值：
let [a,b,c] = [1,2,3];
console.log(a);//1
console.log(b);//2
console.log(c);//3
數組解構使用的是數組字面量，且解構操作全部在數組中完成；上面代碼中，從數組[1,2,3]中分別解構出來1,2,3這三個值，并賦值給a,b,c；這種寫法本質上屬于“模式匹配”，只要等號兩邊的模式相同，就可以通過值在數組中的位置進行選取，并且相對應的賦值；
2、設置默認值
數組解構允許在任意位置指定默認值，當指定位置的元素其值不存在或者為undefined的時候，使用其默認值；
let [x = 3] = [1];
console.log(x);//1
let [y = 4] = [];
console.log(y);//4
let [z = 5] = [undefined];
console.log(z);//5
let [a = 2] = [null];
console.log(a);//null
如果一個數組成員是null，默認值不會生效，因為null === undefined為false；
3、嵌套數組解構
當數組里嵌套一個數組時，即可將數組解構過程深入下一層；
let [a,b,[c,d],e] = [1,2,[3,4],5];
console.log(a);//1
console.log(c);//3
4、解構失敗和不完全解構
解構失敗出現是因為左邊數組的元素比右邊的元素多，這樣就造成左邊變量的值為undefined;
let [a] = [];
console.log(a);//undefined
let [b,c,d] = [1,2];
console.log(b);//1
console.log(c);//2
console.log(d);//undefined
不完全解構表示左邊的數組元素比右邊的元素少，只能匹配部分右邊的元素；
let [a, b, c] = [1, 2, 3, 4];
console.log(a);//1
console.log(b);//2
console.log(c);//3
let [x, [y]] = [1, [2,3]];
console.log(x);//1
console.log(y);//2
如果等號的右邊不是數組，那么將會報錯；
5、交換變量的值
通常我們要交換兩個變量的值都需要使用到第三個變量；
let x = 1;
let y = 2;
let tmp;
tmp = x;
x = y;
y = x;
現在我們使用ES6的數組解構能很方便的實現：
let x = 1;
let y = 2;
[x,y] = [y,x];
console.log(x);//2
console.log(y);//1
對象解構
1、基本用法
對象解構語法形式是在一個賦值操作符左邊放置一個對象字面量：
let obj = {
name:'Jon',
age:22
};
let {name,age} = obj;
console.log(name);//'Jon'
console.log(age);//22
在上面代碼中，obj.name解構儲存在變量name中，obj.age解構儲存在變量age中；對象的解構和數組有一個重要的不同，就是對象的屬性沒有次序，只要變量名和屬性名相同就行；
let {age,name} = obj;
console.log(name);//'Jon'
console.log(age);//22
2、設置默認值
和數組解構一樣，對象解構也可以設置默認值；
let {x = 3} = {};
console.log(x);//3
let {y,z = 3} = {y:5};
console.log(y);//5
console.log(z);//3
let {a = 3 ,b} = {};
console.log(a);//a
console.log(b);//undefined
let {c = 3} = {c:undefined};
console.log(c);//3
let {d = 3} = {c:null};
console.log(d);//3
從上面代碼中可以看出，當對象的屬性值為undefined或者為空時，默認值才會生效；
3、設置別名
我們現在有這么一個場景，后臺給的JSON數據里的屬性名和前端定義的變量值不一樣；那么就可以通過設置別名來進行結構：
let obj = {
foo:'Hello',
bar:'World'
};
let {foo:name,bar} = obj;
console.log(name);//Hello
console.log(bar);//World
console.log(foo);//error:foo is not defined
從上面的代碼看出，obj.foo的值賦值給變量name；在這里foo已經不是變量，只是匹配模式，所以無法找到；對象解構賦值的內部機制，是先找到同名屬性，然后在賦值給對應的變量；
4、嵌套解構
和數組解構一樣，對象解構也可以嵌套：
let obj = {
line: {
start: {
row: 2,
column: 3
},
end: {
row: 3,
column: 4
}
},
circle: 9
};
let {line, line: {start}, line: {start: {row}}, circle} = obj;
console.log(line);//{start:{row:2,column:3},end:{row:3,column:4}}
console.log(start);//{row:2,column:3}
console.log(row);//2
console.log(circle);//9
5、已聲明變量的解構
給一個已聲明的變量解構，是一件很麻煩的事；如果按照以前的方法：
let x ;
{x} = {x:1};//error
會報錯，因為JavaScript引擎會將{x}理解城代碼塊，從而發生語法錯誤；那如何避免JavaScript將其解釋為代碼塊，就只有讓大括號不寫在行首；
let x;
({x} = {x:1});
console.log(x);//1
上面代碼將整個解構賦值語句，放在一個圓括號里面，就可以正確執行。
函數參數解構
1、基本用法
function fn([x, y]) {
console.log(x + y);
}
fn([1, 2]);//3
function fn2({x, y}) {
console.log(x * y);
}
fn2({x:1,y:2});//2
從上面代碼可以看出，函數參數的解構其實就是變成數組的解構或者對象的解構；
2、設置默認值
函數參數解構可以設置默認值，這樣就可以避免缺少值而報錯的情況；
function fn({x = 2,y = 3} = {}) {
console.log([x,y]);
}
fn({x:3,y:4});//[3,4]
fn({x:3});//[3,3]
fn({});//[2,3]
fn();//[2,3]