這篇文章主要給大家介紹了關於在JavaScript中如何訪問暫未存在的嵌套對象的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用JavaScript具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
前言
JavaScript 是個很神奇的東西。但是 JavaScript中的一些東西確實很奇怪,讓人摸不着頭腦。其中之一就是當你試圖訪問嵌套對象時,會遇到這個錯誤
Cannot read property 'foo' of undefined
在大多數情況下,處理嵌套的對象,通常我們需要安全地訪問最內層嵌套的值。 來個粟子:
const user = { id: 101, email: '[email protected]', 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: '[email protected]' }
現在,如果你在試着訪問 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,可以做到這一點。但是在輕量級前端項目中,特別是如果你只需要這些庫中的一兩個方法時,最好選擇另一個輕量級庫,或者編寫自己的庫。
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對神馬文庫的支持。