在JavaScript中訪問嵌套對象

以超酷的方式安全地訪問JavaScript中的嵌套對象

JavaScript是驚人的，我們都知道。但是JavaScript中的一些東西真的很奇怪，它們讓我們大開眼界。其中一個問題是當您嘗試訪問嵌套對象時與此錯誤的對抗，

無法讀取未定義的屬性'foo'

大多數情況下，當我們使用JavaScript時，我們將處理嵌套對象，并且通常我們需要安全地訪問最里面的嵌套值。

我們以此嵌套對象為例。

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

要訪問我們用戶的名字，我們會寫

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

這很簡單直接。

但是，由于某種原因，如果我們用戶的個人信息不可用，那么對象結構將是這樣的。

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

現在，如果您嘗試訪問該名稱，您將被拋出 無法讀取未定義的屬性“名稱”。

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

這是因為我們試圖name 從不存在的對象訪問 密鑰。

大多數開發人員處理這種情況的常用方法是

const name = user && user.personalInfo ? user.personalInfo.name : null;// undefined error will NOT be thrown as we check for existence before access如果您的嵌套結構很簡單，這是可以的，但是如果您的數據嵌套了5或6級，那么您的代碼看起來會非常混亂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;

使用這種表示法，您將永遠不會遇到 無法讀取未定義的屬性“名稱”。你基本上檢查用戶是否存在，如果沒有，你動態創建一個空對象。這樣，下一級鍵將 始終從存在的對象或空對象訪問，但永遠不會從未定義。

不幸的是， 您無法使用此技巧訪問嵌套數組

使用Array Reduce訪問嵌套對象

Array reduce方法非常強大，可用于安全地訪問嵌套對象。

const getNestedObject = (nestedObj, pathArr) => { return pathArr.reduce((obj, key) => (obj && obj[key] !== 'undefined') ? obj[key] : null, nestedObj);}// pass in your object structure as array elementsconst name = getNestedObject(user, ['personalInfo', 'name']);// to access nested array, just pass in array index as an element the path array.const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);// this will return the city from the first address item.

Typy

https://github.com/flexdinesh/typy

如果您認為上述方法過于主流，那么您應該嘗試 我編寫的Typy庫。除了安全地訪問嵌套對象之外，它還有許多令人敬畏的東西。

它以npm包的形式提供 - 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這樣的其他庫可以做到這一點。但是在輕量級的前端項目中，特別是如果你只需要這些庫中的一兩種方法，最好選擇替代輕量級的lib，或者更好，自己編寫。

快樂'安全地訪問JavaScript中的嵌套對象'！

鏈接：https://javascriptkicks.com/articles/236734/accessing-nested-objects-in-javascript

總結

以上是生活随笔為你收集整理的选择嵌套_如何优雅地在JavaScript中访问嵌套对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。