菜鳥也談js（一）——ES6解構對象篇

前言

爲何我會在開篇談這樣一個low到爆的問題呢？這是由於一個偉大的錯誤，多麼痛的領悟！從前，我深深的覺得，後臺是權威，後臺的數據必須是對的。直到有一天測試給我反饋了一個bug，個人頁面崩潰了.....怎麼可能呢！！！做爲一個21世紀三好青年寫的頁面怎麼會崩潰？

來龍去脈——罪惡的代碼

調用接口，接口正常狀況下，應該返回以下數據

// 後臺返回的數據
var userInfo = {
    name: 'Lily',
    age: '18',
    education: {
        degree: 'Masters',
        school: 'SYSU'
    }
};
複製代碼

當年年輕的我，堅信個人代碼是正確的，這不就是一個簡單的對象嗎，So easy!

var education = userInfo.education;
var degree = education.degree;
var school = education.school;
複製代碼

我犯了全部年輕程序員都會犯的錯誤！/(ㄒoㄒ)/~~ 一天，後臺接口返回userInfo爲一個undefined，悲催的我，頁面崩潰了.... 做爲一個愛學習的良好青年，有了bug，固然第一時間debug（F12)了

最後發現這是後臺返回數據的問題，但做爲一個勵志成爲十佳前端的人，怎麼能親信後臺呢？Too young too simple!

解決bug

我發現這個問題後，就對代碼作了兼容，兼容措施以下：

var education = userInfo && userInfo.education;
var degree = education && education.degree;
var school = education && education.school;
複製代碼

在發現ES6對象解構這個東東之前，我一直都是這麼作的，代碼也穩健的活了下來，直到有一天我發現了ES6，ES6成功的拯救了我。 下面重點介紹ES6對象解構的知識。

ES6對象解構

最基本的解構

從一個簡單的栗子開始！

// ES6年代咱們都不怎麼用var，用const就感受很厲害的樣子
const userInfo = {
    name: 'Lily',
    age: '18'
};
// 解構開始
const { name, age } = userInfo; // 此處有風險，最好改成 userInfo || {}
console.log(name); // Lily

複製代碼

有木有以爲，在解構大對象時會很方便，我也是這麼以爲的。下面看一個更給力的QAQ。

解構並使用別名

有時接口定義的字段每每不是咱們想要的，甚至是和咱們其餘變量存在衝突，咱們該怎麼辦呢？我也很無奈，叫後臺改唄（你可能會被打死😝）！其實咱們在解構時也能夠設置別名。

const userInfo = {
    name: 'Lily',
    age: '18'
};
// 解構開始
const { name: nickName } = userInfo;// 此處有風險，最好改成 userInfo || {}
console.log(nickName);
複製代碼

解構嵌套對象

當咱們遇到嵌套對象，該怎麼辦呢？對於一個菜鳥通常能夠這樣作：

// 後臺返回的數據
var userInfo = {
    name: 'Lily',
    age: '18',
    education: {
        degree: 'Masters',
        school: 'SYSU'
    }
};
const { education } = userInfo; // 此處有風險，最好改成 userInfo || {}
const { degree } = education // 此處有風險，後面會說明
console.log(degree); // Masters
複製代碼

上面咱們寫了兩行，一層層剝開，明顯繁瑣，若是這個對象有三四層結構那簡直沒法入目。其實能夠用解構一步到位的：

// 後臺返回的數據
const userInfo = {
    name: 'Lily',
    age: '18',
    education: {
        degree: 'Masters',
        school: 'SYSU'
    }
};
const { education: { degree }} = userInfo;// 此處有風險，後面會說明
console.log(degree); // Masters
複製代碼

沒有外層怎麼辦

仍是上面這個栗子，咱們依然要解構出degree字段，加入可惡的後臺某次返回的數據丟失了education字段

// 後臺返回的數據
const userInfo = {
    name: 'Lily',
    age: '18'
};
const { education: { degree }} = userInfo;// TUncaught TypeError: Cannot destructure property `degree` of 'undefined' or 'null'.
複製代碼

這是你是否會以爲仍是咱們原來的方法好，最起碼不會出錯

const userInfo = {
    name: 'Lily',
    age: '18'
};
const education = userInfo && userInfo.education;
const degree = education && education.degree;
const school = education && education.school;
複製代碼

若是你是一個前端老鳥，必定知道其實咱們的對象解構也是能夠設置缺省值的。

// 後臺返回的數據
const userInfo = {
    name: 'Lily',
    age: '18'
};
const { 
    education: { 
        degree 
    } = {}
} = userInfo || {};
console.log(degree); // undefined
複製代碼

這樣一來咱們的解構就完美了，就算後臺掛了，咱們也依然堅挺，雄起！！！

更深層次的對象解構

後臺正常返回數據

const userInfo = {
    name: 'Lily',
    age: 18,
    education: {
        school: {
            name: 'SYSU',
            rank: '9'
        }
    }
}
複製代碼

加入咱們要解構出name和rank字段，該怎麼作呢？其實咱們有兩種方式

• 方式一 分別給education和school設置缺省值爲{}

// 後臺實際返回數據
const userInfo = {
    name: 'Lily',
    age: 18
};
const {
    education: {
        school: {
            name,
            rank
        } = {}
    } = {}
} = userInfo || {};
console.log(name); // undefined
複製代碼

• 方式二 直接給education設置缺省值爲{school: {}}。

// 後臺實際返回數據
const userInfo = {
    name: 'Lily',
    age: 18
};
const {
    education: {
        school: {
            name,
            rank
        } 
    } = {
        school: {}
    }
} = userInfo || {};
console.log(name); // undefined
複製代碼

結語

這裏咱們主要介紹了ES6解構對象的便利之處，麻麻不再用擔憂我解構複雜對象了！測試也不會再給我報bug了。最後最重要的三點！

永遠不要相信後臺承諾返回的數據格式

永遠不要相信後臺承諾返回的數據格式

永遠不要相信後臺承諾返回的數據格式

@Author: Even