為什么要使用解構(gòu)
var obj = {
name:'Jon',
age:22
};
var name = obj.name;
var age = obj.age;
上面代碼是我們以前開(kāi)發(fā)時(shí)經(jīng)常要使用的橄碾，從對(duì)象和數(shù)組中獲取數(shù)據(jù)蒋得，并給變量賦值级及；當(dāng)對(duì)象和數(shù)組的數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜時(shí)，這種方法就比較麻煩了额衙，有時(shí)需要一個(gè)個(gè)或者遍歷饮焦；所以ES6添加了解構(gòu)功能；將數(shù)據(jù)結(jié)構(gòu)打散的過(guò)程變得更加簡(jiǎn)單入偷，可以從打散后更小的部分中獲取所需的信息追驴。
數(shù)組解構(gòu)
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
數(shù)組解構(gòu)使用的是數(shù)組字面量殿雪，且解構(gòu)操作全部在數(shù)組中完成；上面代碼中锋爪，從數(shù)組[1,2,3]中分別解構(gòu)出來(lái)1,2,3這三個(gè)值丙曙，并賦值給a,b,c；這種寫(xiě)法本質(zhì)上屬于“模式匹配”其骄，只要等號(hào)兩邊的模式相同亏镰，就可以通過(guò)值在數(shù)組中的位置進(jìn)行選取，并且相對(duì)應(yīng)的賦值拯爽；
2索抓、設(shè)置默認(rèn)值
數(shù)組解構(gòu)允許在任意位置指定默認(rèn)值，當(dāng)指定位置的元素其值不存在或者為undefined的時(shí)候，使用其默認(rèn)值逼肯；
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
如果一個(gè)數(shù)組成員是null耸黑，默認(rèn)值不會(huì)生效，因?yàn)閚ull === undefined為false篮幢；
3大刊、嵌套數(shù)組解構(gòu)
當(dāng)數(shù)組里嵌套一個(gè)數(shù)組時(shí)，即可將數(shù)組解構(gòu)過(guò)程深入下一層三椿；
let [a,b,[c,d],e] = [1,2,[3,4],5];
console.log(a);//1
console.log(c);//3
4缺菌、解構(gòu)失敗和不完全解構(gòu)
解構(gòu)失敗出現(xiàn)是因?yàn)樽筮厰?shù)組的元素比右邊的元素多，這樣就造成左邊變量的值為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
不完全解構(gòu)表示左邊的數(shù)組元素比右邊的元素少搜锰，只能匹配部分右邊的元素伴郁；
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
如果等號(hào)的右邊不是數(shù)組，那么將會(huì)報(bào)錯(cuò)蛋叼；
5蛾绎、交換變量的值
通常我們要交換兩個(gè)變量的值都需要使用到第三個(gè)變量；
let x = 1;
let y = 2;
let tmp;
tmp = x;
x = y;
y = x;
現(xiàn)在我們使用ES6的數(shù)組解構(gòu)能很方便的實(shí)現(xiàn)：
let x = 1;
let y = 2;
[x,y] = [y,x];
console.log(x);//2
console.log(y);//1
對(duì)象解構(gòu)
1鸦列、基本用法
對(duì)象解構(gòu)語(yǔ)法形式是在一個(gè)賦值操作符左邊放置一個(gè)對(duì)象字面量：
let obj = {
name:'Jon',
age:22
};
let {name,age} = obj;
console.log(name);//'Jon'
console.log(age);//22
在上面代碼中租冠，obj.name解構(gòu)儲(chǔ)存在變量name中，obj.age解構(gòu)儲(chǔ)存在變量age中薯嗤；對(duì)象的解構(gòu)和數(shù)組有一個(gè)重要的不同顽爹，就是對(duì)象的屬性沒(méi)有次序，只要變量名和屬性名相同就行骆姐；
let {age,name} = obj;
console.log(name);//'Jon'
console.log(age);//22
2镜粤、設(shè)置默認(rèn)值
和數(shù)組解構(gòu)一樣，對(duì)象解構(gòu)也可以設(shè)置默認(rèn)值玻褪；
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
從上面代碼中可以看出肉渴，當(dāng)對(duì)象的屬性值為undefined或者為空時(shí)，默認(rèn)值才會(huì)生效带射；
3同规、設(shè)置別名
我們現(xiàn)在有這么一個(gè)場(chǎng)景，后臺(tái)給的JSON數(shù)據(jù)里的屬性名和前端定義的變量值不一樣窟社；那么就可以通過(guò)設(shè)置別名來(lái)進(jìn)行結(jié)構(gòu)：
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已經(jīng)不是變量灿里，只是匹配模式关炼，所以無(wú)法找到；對(duì)象解構(gòu)賦值的內(nèi)部機(jī)制匣吊，是先找到同名屬性儒拂，然后在賦值給對(duì)應(yīng)的變量寸潦；
4、嵌套解構(gòu)
和數(shù)組解構(gòu)一樣社痛，對(duì)象解構(gòu)也可以嵌套：
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甸祭、已聲明變量的解構(gòu)
給一個(gè)已聲明的變量解構(gòu)，是一件很麻煩的事褥影；如果按照以前的方法：
let x ;
{x} = {x:1};//error
會(huì)報(bào)錯(cuò)，因?yàn)镴avaScript引擎會(huì)將{x}理解城代碼塊咏雌，從而發(fā)生語(yǔ)法錯(cuò)誤凡怎；那如何避免JavaScript將其解釋為代碼塊，就只有讓大括號(hào)不寫(xiě)在行首赊抖；
let x;
({x} = {x:1});
console.log(x);//1
上面代碼將整個(gè)解構(gòu)賦值語(yǔ)句统倒，放在一個(gè)圓括號(hào)里面，就可以正確執(zhí)行氛雪。
函數(shù)參數(shù)解構(gòu)
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
從上面代碼可以看出，函數(shù)參數(shù)的解構(gòu)其實(shí)就是變成數(shù)組的解構(gòu)或者對(duì)象的解構(gòu)报亩；
2浴鸿、設(shè)置默認(rèn)值
函數(shù)參數(shù)解構(gòu)可以設(shè)置默認(rèn)值，這樣就可以避免缺少值而報(bào)錯(cuò)的情況弦追；
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]