在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;

上面写法会检查用户是否存在,如果没有,就动态创建一个空对象。这样,下一级键将始终从存在的对象或空对象访问,但永远不会报读取不到值的错