如何在JavaScript中訪問暫未存在的嵌套對象

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

JavaScript 是個很神奇的東西。可是 JavaScript中的一些東西確實很奇怪，讓人摸不着頭腦。其中之一就是當你試圖訪問嵌套對象時，會遇到這個錯誤

Cannot read property 'foo' of undefined

在大多數狀況下，處理嵌套的對象，一般咱們須要安全地訪問最內層嵌套的值。 來個粟子：

const user = {
    id: 101,
    email: 'jack@dev.com',
    personalInfo: {
        name: 'Jack',
        address: {
            line1: 'westwish st',
            line2: 'washmasher',
            city: 'wallas',
            state: 'WX'
        }
    }
}

當咱們要訪問user裏面的name及city時，咱們會這樣寫。

const name = user.personalInfo.name;
const userCity = user.personalInfo.address.city;

這是簡單而直接的。

可是，因爲某種緣由，user 中的 personal不可用，對象結構將是這樣的：

const user = {
    id: 101,
    email: 'jack@dev.com'
}

如今，若是你在試着訪問 name ，將會獲得一個 Cannot read property 'name' of undefined 的錯誤。

const name = user.personalInfo.name; // Cannot read property 'name' of undefined

這是由於咱們試圖訪問對象中不在的 key 爲 name 的屬性。

大多數開發人員處理這種狀況的經常使用方法以下，

const name = user && user.personalInfo ? user.personalInfo.name : null;

若是你的嵌套結構很簡單，這是能夠的，可是若是數據嵌套五或六層深，那麼你的代碼就會看起很混亂：

let city;
if (
    data && data.user && data.user.personalInfo &&
    data.user.personalInfo.addressDetails &&
    data.user.personalInfo.addressDetails.primaryAddress
   ) {
    city = data.user.personalInfo.addressDetails.primaryAddress;
}

有一些技巧能夠處理這種混亂的對象結構。

Oliver Steele的嵌套對象訪問模式

這是我我的的最愛，由於它使代碼看起來乾淨簡單。 我從 stackoverflow 中選擇了這種風格，一旦你理解它是如何工做的，它就很是吸引人了。

const name = ((user || {}).personalInfo || {}).name;

使用這種表示法，永遠不會遇到沒法讀取未定義的屬性「name」。作法是檢查用戶是否存在，若是不存在，就建立一個空對象，這樣，下一個級別的鍵將始終從存在的對象訪問。

不幸的是，你不能使用此技巧訪問嵌套數組。

使用數組Reduce訪問嵌套對象

Array reduce 方法很是強大，可用於安全地訪問嵌套對象。

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : null, nestedObj);
}

// 將對象結構做爲數組元素傳入
const name = getNestedObject(user, ['personalInfo', 'name']);

// 要訪問嵌套數組，只需將數組索引做爲數組元素傳入。.
const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
// 這將從 addresses 中的第一層返回 city

Typy

若是你認爲上面的方法太過非主流，那麼可使用 Typy庫。除了安全訪問嵌套對象以外，它還能夠作不少很棒的事情。

若是使用Typy，代碼將以下所示

import t from 'typy';

const name = t(user, 'personalInfo.name').safeObject;
const city = t(user, 'personalInfo.addresses[0].city').safeObject;
// address is an array

這裏還有一些其餘的庫，如 Lodash 和 Ramda，能夠作到這一點。可是在輕量級前端項目中，特別是若是你只須要這些庫中的一兩個方法時，最好選擇另外一個輕量級庫，或者編寫本身的庫。

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。