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

malakashi 發布于2019-08-23 18:10 / 2314人閱讀

摘要：做法是檢查用戶是否存在，如果不存在，就創建一個空對象，這樣，下一個級別的鍵將始終從存在的對象訪問。使用數組訪問嵌套對象方法非常強大，可用于安全地訪問嵌套對象。除了安全訪問嵌套對象之外，它還可以做很多很棒的事情。

想閱讀更多優質文章請猛戳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...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104785.html

JavaScript 進階從實現理解閉包（校對版）

摘要：嵌套函數在一個函數中創建另一個函數，稱為嵌套。這在很容易實現嵌套函數可以訪問外部變量，幫助我們很方便地返回組合后的全名。更有趣的是，嵌套函數可以作為一個新對象的屬性或者自己本身被。來源于現代JavaScript教程閉包章節中文翻譯計劃本文很清晰地解釋了閉包是什么，以及閉包如何產生，相信你看完也會有所收獲關鍵字Closure 閉包Lexical Environment 詞法環境En...

wuyangnju 2019-08-26 11:59 評論0 收藏0
在javascript中安全地訪問深層嵌套的值

摘要：介紹這是一篇短文，旨在展示多種在中安全地訪問深層嵌套值的方式。所以每次我們想要訪問深度嵌套的數據時，都必須明確地進行手動檢查。我們還觸及了，可以更新深度嵌套數據而不會改變對象。介紹這是一篇短文，旨在展示多種在javascript中安全地訪問深層嵌套值的方式。下面的例子通過不同的方式來解決這一問題。開始之前，讓我們看下實際遇到這種狀況時.. 假設有一個props對象(如下)，當我們...

zacklee 2019-08-26 11:49 評論0 收藏0
使用leancloud給簡歷加數據庫,實現留言功能

摘要：擁有登錄注冊手機驗證碼功能收費存儲任意信息讀取任意信息搜索任意信息刪除任意信息更新任意信息等功能。使用leancloud給簡歷加數據庫,實現留言功能這篇博客的源代碼是我的正在寫的在線簡歷完整代碼(項目暫未完成)預覽地址在本地預覽項目的時候用的http-server 前端的兩大塊: 操縱DOM:DOM API/jQuery Ajax:http請求和響應/XMLHttpReques...

susheng 2019-08-23 11:00 評論0 收藏0
理解JavaScript的核心知識點：作用域

摘要：也毫不例外，但在中作用域的特性與其他高級語言稍有不同，這是很多學習者久久難以理清的一個核心知識點。主要使用的是函數作用域。關于作用域：About Scope 作用域是程序設計里的基礎特性，是作用域使得程序運行時可以使用變量存儲值、記錄和改變程序的狀態。JavaScript 也毫不例外，但在 JavaScript 中作用域的特性與其他高級語言稍有不同，這是很多學習者久久難以理清的一個核...

HelKyle 2019-08-26 13:31 評論0 收藏0
【8】JavaScript 函數高級——閉包

摘要：理解二包含被引用變量函數的對象極少數人。在函數外部能直接訪問函數內部的局部變量嗎不能但我們可以通過閉包讓外部操作它。死亡在嵌套的內部函數成為垃圾對象時。 JavaScript函數高級——閉包一、引子實例 00_引入測試1 測試2 測試3 var btns = document.getElementsByTagName(butto...

Lorry_Lu 2019-08-23 18:21 評論0 收藏0