菜鳥也談js（一）——ES6解構物件篇

黑金團隊發表於2018-12-08
JS物件

前言

為什麼我會在開篇談這樣一個low到爆的問題呢？這是因為一個偉大的錯誤，多麼痛的領悟！從前，我深深的以為，後臺是權威，後臺的資料必須是對的。直到有一天測試給我反饋了一個bug，我的頁面崩潰了.....怎麼可能呢！！！作為一個21世紀三好青年寫的頁面怎麼會崩潰？

菜鳥也談js（一）——ES6解構物件篇

前因後果——罪惡的程式碼

呼叫介面，介面正常情況下，應該返回如下資料

// 後臺返回的資料
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)了

菜鳥也談js（一）——ES6解構物件篇
最後發現這是後臺返回資料的問題，但作為一個勵志成為十佳前端的人，怎麼能親信後臺呢？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'.
複製程式碼

菜鳥也談js（一）——ES6解構物件篇

這是你是否會覺得還是我們原來的方法好，最起碼不會出錯

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

相關文章