什么是解構(gòu)液南？
解構(gòu)與構(gòu)造數(shù)據(jù)截然相反。 例如勾徽，它不是構(gòu)造一個新的對象或數(shù)組滑凉，而是逐個拆分現(xiàn)有的對象或數(shù)組，來提取你所需要的數(shù)據(jù)喘帚。可以快速取得數(shù)組或?qū)ο螽?dāng)中的元素或?qū)傩云┪校鵁o需使用arr[x]或者obj[key]等傳統(tǒng)方式進(jìn)行賦值。
ES6使用了一種新模式來匹配你想要提取的數(shù)值, 解構(gòu)賦值就是采用了這種模式啥辨。 該模式會映射出你正在解構(gòu)的數(shù)據(jù)結(jié)構(gòu)涡匀，只有那些與該模式相匹配的數(shù)據(jù)，才會被提取出來溉知。
被解構(gòu)的數(shù)據(jù)項位于賦值運(yùn)算符 = 的右側(cè)陨瘩，可以是任何數(shù)組和對象的組合，允許隨意嵌套级乍。用于給這些數(shù)據(jù)賦值的變量個數(shù)不限舌劳。
直白解釋:模式匹配,映射關(guān)系,只要等號兩邊的模式相同,一一對應(yīng),左邊的變量就會被賦予對應(yīng)的值。
對象解構(gòu)
最基本的解構(gòu)
// ES6年代我們都不怎么用var玫荣，用const就感覺很厲害的樣子
const userInfo = {
name: 'Lily',
age: '18'
};
// 解構(gòu)開始
const { name, age } = userInfo; // 此處有風(fēng)險甚淡，最好改為 userInfo || {}
console.log(name); // Lily
解構(gòu)并使用別名
有時接口定義的字段往往不是我們想要的，甚至是和我們其他變量存在沖突捅厂，我們該怎么辦呢贯卦？我也很無奈，叫后臺改唄（你可能會被打死??）焙贷！其實(shí)我們在解構(gòu)時也可以設(shè)置別名撵割。
const userInfo = {
name: 'Lily',
age: '18'
};
// 解構(gòu)開始
const { name: nickName } = userInfo;// 此處有風(fēng)險，最好改為 userInfo || {}
console.log(nickName);
解構(gòu)嵌套對象
// 后臺返回的數(shù)據(jù)
var userInfo = {
name: 'Lily',
age: '18',
education: {
degree: 'Masters',
school: 'SYSU'
}
};
const { education } = userInfo; // 此處有風(fēng)險辙芍，最好改為 userInfo || {}
const { degree } = education // 此處有風(fēng)險啡彬，后面會說明
console.log(degree); // Masters
上面我們寫了兩行，一層層剝開故硅，明顯繁瑣庶灿，如果這個對象有三四層結(jié)構(gòu)那簡直無法入目。其實(shí)可以用解構(gòu)一步到位的：
// 后臺返回的數(shù)據(jù)
const userInfo = {
name: 'Lily',
age: '18',
education: {
degree: 'Masters',
school: 'SYSU'
}
};
const { education: { degree }} = userInfo;// 此處有風(fēng)險吃衅，后面會說明
console.log(degree); // Masters
沒有外層怎么辦
//會報錯
// 后臺返回的數(shù)據(jù)
const userInfo = {
name: 'Lily',
age: '18'
};
const { education: { degree }} = userInfo;// TUncaught TypeError: Cannot destructure property `degree` of 'undefined' or 'null'.
如果你是一個前端老鳥往踢，一定知道其實(shí)我們的對象解構(gòu)也是可以設(shè)置缺省值的。
// 后臺返回的數(shù)據(jù)
const userInfo = {
name: 'Lily',
age: '18'
};
const {
education: {
degree
} = {}
} = userInfo || {};
console.log(degree); // undefined
這樣一來我們的解構(gòu)就完美了捐晶，就算后臺掛了菲语，我們也依然堅挺妄辩，雄起！Ｉ缴稀眼耀！
