在JavaScript中如何訪問(wèn)暫未存在的嵌套對(duì)象
前言
JavaScript 是個(gè)很神奇的東西。但是 JavaScript中的一些東西確實(shí)很奇怪,讓人摸不著頭腦。其中之一就是當(dāng)你試圖訪問(wèn)嵌套對(duì)象時(shí),會(huì)遇到這個(gè)錯(cuò)誤
Cannot read property 'foo' of undefined
在大多數(shù)情況下,處理嵌套的對(duì)象,通常我們需要安全地訪問(wèn)最內(nèi)層嵌套的值。 來(lái)個(gè)粟子:
const user = {
id: 101,
email: 'jack@dev.com',
personalInfo: {
name: 'Jack',
address: {
line1: 'westwish st',
line2: 'washmasher',
city: 'wallas',
state: 'WX'
}
}
}
當(dāng)我們要訪問(wèn)user里面的name及city時(shí),我們會(huì)這樣寫。
const name = user.personalInfo.name; const userCity = user.personalInfo.address.city;
這是簡(jiǎn)單而直接的。
但是,由于某種原因,user 中的 personal不可用,對(duì)象結(jié)構(gòu)將是這樣的:
const user = {
id: 101,
email: 'jack@dev.com'
}
現(xiàn)在,如果你在試著訪問(wèn) name ,將會(huì)得到一個(gè) Cannot read property 'name' of undefined 的錯(cuò)誤。
const name = user.personalInfo.name; // Cannot read property 'name' of undefined
這是因?yàn)槲覀冊(cè)噲D訪問(wèn)對(duì)象中不在的 key 為 name 的屬性。
大多數(shù)開發(fā)人員處理這種情況的常用方法如下,
const name = user && user.personalInfo ? user.personalInfo.name : null;
如果你的嵌套結(jié)構(gòu)很簡(jiǎn)單,這是可以的,但是如果數(shù)據(jù)嵌套五或六層深,那么你的代碼就會(huì)看起很混亂:
let city;
if (
data && data.user && data.user.personalInfo &&
data.user.personalInfo.addressDetails &&
data.user.personalInfo.addressDetails.primaryAddress
) {
city = data.user.personalInfo.addressDetails.primaryAddress;
}
有一些技巧可以處理這種混亂的對(duì)象結(jié)構(gòu)。
Oliver Steele的嵌套對(duì)象訪問(wèn)模式
這是我個(gè)人的最愛(ài),因?yàn)樗勾a看起來(lái)干凈簡(jiǎn)單。 我從 stackoverflow 中選擇了這種風(fēng)格,一旦你理解它是如何工作的,它就非常吸引人了。
const name = ((user || {}).personalInfo || {}).name;
使用這種表示法,永遠(yuǎn)不會(huì)遇到無(wú)法讀取未定義的屬性“name”。做法是檢查用戶是否存在,如果不存在,就創(chuàng)建一個(gè)空對(duì)象,這樣,下一個(gè)級(jí)別的鍵將始終從存在的對(duì)象訪問(wèn)。
不幸的是,你不能使用此技巧訪問(wèn)嵌套數(shù)組。
使用數(shù)組Reduce訪問(wèn)嵌套對(duì)象
Array reduce 方法非常強(qiáng)大,可用于安全地訪問(wèn)嵌套對(duì)象。
const getNestedObject = (nestedObj, pathArr) => {
return pathArr.reduce((obj, key) =>
(obj && obj[key] !== 'undefined') ? obj[key] : null, nestedObj);
}
// 將對(duì)象結(jié)構(gòu)作為數(shù)組元素傳入
const name = getNestedObject(user, ['personalInfo', 'name']);
// 要訪問(wèn)嵌套數(shù)組,只需將數(shù)組索引作為數(shù)組元素傳入。.
const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
// 這將從 addresses 中的第一層返回 city
Typy
如果你認(rèn)為上面的方法太過(guò)非主流,那么可以使用 Typy庫(kù)。除了安全訪問(wèn)嵌套對(duì)象之外,它還可以做很多很棒的事情。
如果使用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
這里還有一些其他的庫(kù),如 Lodash 和 Ramda,可以做到這一點(diǎn)。但是在輕量級(jí)前端項(xiàng)目中,特別是如果你只需要這些庫(kù)中的一兩個(gè)方法時(shí),最好選擇另一個(gè)輕量級(jí)庫(kù),或者編寫自己的庫(kù)。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JavaScript實(shí)現(xiàn)將毫秒數(shù)轉(zhuǎn)換為易讀時(shí)長(zhǎng)格式
在許多開發(fā)場(chǎng)景中,我們通常需要將后端接口返回的毫秒數(shù)轉(zhuǎn)換成更易讀的時(shí)長(zhǎng)格式,本文將封裝一個(gè)簡(jiǎn)潔的 JavaScript 函數(shù)實(shí)現(xiàn)這一功能,需要的可以了解下2025-02-02
JavaScript?ES6模塊導(dǎo)入和導(dǎo)出的方法
ES6在語(yǔ)言標(biāo)準(zhǔn)的層面上實(shí)現(xiàn)了模塊功能,而且實(shí)現(xiàn)的相當(dāng)簡(jiǎn)單,完全可以取代CommonJS和AMD規(guī)范,成為瀏覽器和服務(wù)器通用的模塊解決方案,下面這篇文章主要給大家介紹了關(guān)于ES6模塊導(dǎo)入和導(dǎo)出的方法,需要的朋友可以參考下2022-07-07
JS實(shí)現(xiàn)根據(jù)密碼長(zhǎng)度顯示安全條功能
這篇文章主要介紹了基于JS實(shí)現(xiàn)根據(jù)密碼長(zhǎng)度顯示安全條功能,非常不錯(cuò),在一些網(wǎng)站上經(jīng)常會(huì)遇到此功能,需要的的朋友參考下實(shí)現(xiàn)代碼吧2017-03-03
JavaScript實(shí)現(xiàn)給浮點(diǎn)數(shù)添加千分位逗號(hào)的多種方法
JavaScript 是一門強(qiáng)大的前端語(yǔ)言,在處理數(shù)值格式化時(shí)提供了多種方法,在開發(fā)過(guò)程中,我們經(jīng)常需要將大數(shù)字格式化,使其更具可讀性,例如,將 12000000.11 轉(zhuǎn)換為 12,000,000.11,本文將詳細(xì)介紹 JavaScript 中如何實(shí)現(xiàn)這種格式化,需要的朋友可以參考下2025-04-04
解決Webpack 熱部署檢測(cè)不到文件變化的問(wèn)題
下面小編就為大家分享一篇解決Webpack 熱部署檢測(cè)不到文件變化的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
通過(guò)設(shè)置CSS中的position屬性來(lái)固定層的位置
position 屬性規(guī)定元素的定位類型,這個(gè)屬性定義建立元素布局所用的定位機(jī)制,本文給大家介紹通過(guò)設(shè)置CSS中的position屬性來(lái)固定層的位置,感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JavaScript深度復(fù)制(deep clone)的實(shí)現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制(deep clone)的實(shí)現(xiàn)方法,涉及到j(luò)s深度復(fù)制相關(guān)知識(shí),本文介紹的非常詳細(xì),特此分享腳本之家平臺(tái)供大家參考2016-02-02
JS圖片延遲加載插件LazyImgv1.0用法分析【附demo源碼下載】
這篇文章主要介紹了JS圖片延遲加載插件LazyImgv1.0用法,結(jié)合實(shí)例形式分析了使用圖片延遲加載插件LazyImgv1.0的注意事項(xiàng)與核心操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-09-09

