You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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;
}
import t from 'typy';
const name = t(user, 'personalInfo.name').safeObject;
const city = t(user, 'personalInfo.addresses[0].city').safeObject;
// address is an array
为了保证可读性,本文采用意译而非真译。
JavaScript 是个很神奇的东西。但是 JavaScript中的一些东西确实很奇怪,让人摸不着头脑。其中之一就是当你试图访问嵌套对象时,会遇到这个错误
Cannot read property 'foo' of undefined
在大多数情况下,处理嵌套的对象,通常我们需要安全地访问最内层嵌套的值。 来个粟子:
当我们要访问
user
里面的name
及city
时,我们会这样写。这是简单而直接的。
但是,由于某种原因,
user
中的personal
不可用,对象结构将是这样的:现在,如果你在试着访问
name
,将会得到一个Cannot read property 'name' of undefined
的错误。这是因为我们试图访问对象中不在的 key 为
name
的属性。大多数开发人员处理这种情况的常用方法如下,
如果你的嵌套结构很简单,这是可以的,但是如果数据嵌套五或六层深,那么你的代码就会看起很混乱:
有一些技巧可以处理这种混乱的对象结构。
Oliver Steele的嵌套对象访问模式
这是我个人的最爱,因为它使代码看起来干净简单。 我从 stackoverflow 中选择了这种风格,一旦你理解它是如何工作的,它就非常吸引人了。
使用这种表示法,永远不会遇到无法读取未定义的属性“
name
”。做法是检查用户是否存在,如果不存在,就创建一个空对象,这样,下一个级别的键将始终从存在的对象访问。不幸的是,你不能使用此技巧访问嵌套数组。
使用数组Reduce访问嵌套对象
Array reduce 方法非常强大,可用于安全地访问嵌套对象。
Typy
如果你认为上面的方法太过非主流,那么可以使用 Typy库。除了安全访问嵌套对象之外,它还可以做很多很棒的事情。
如果使用Typy,代码将如下所示
这里还有一些其他的库,如
Lodash
和Ramda
,可以做到这一点。但是在轻量级前端项目中,特别是如果你只需要这些库中的一两个方法时,最好选择另一个轻量级库,或者编写自己的库。原文:https://javascriptkicks.com/articles/236734/accessing-nested-objects-in-javascript
交流
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
The text was updated successfully, but these errors were encountered: