在JavaScript中安全访问嵌套对象
大多数情况下,当我们使用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 user = { id: 101, email: 'jack@dev.com' }
现在,如果尝试访问该名称,将被抛出无法读取未定义的属性“名称”。
/* Cannot read property 'name' of undefined */ const name = user.personalInfo.name;
大多数处理这种情况的常用方法是这样
const name = user && user.personalInfo ? user.personalInfo.name : null;
如果嵌套结构很简单,这是可以的,但是如果数据嵌套了5或6级,那么代码看起来会非常混乱,这时就要另外一种优雅的写法了,直接看代码:
const name = ((user || {}).personalInfo || {}).name;
上面写法会检查用户是否存在,如果没有,就动态创建一个空对象。这样,下一级键将始终从存在的对象或空对象访问,但永远不会报读取不到值的错。