如何在JavaScript中访问暂未存在的嵌套对象

译者：前端小智

原文：javascriptkicks.com/articles/23…

为了保证可读性，本文采用意译而非真译。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

JavaScript 是个很神奇的东西。可是 JavaScript中的一些东西确实很奇怪，让人摸不着头脑。其中之一就是当你试图访问嵌套对象时，会遇到这个错误

Cannot read property 'foo' of undefined

在大多数状况下，处理嵌套的对象，一般咱们须要安全地访问最内层嵌套的值。 来个粟子：

const user = {
    id: 101,
    email: 'jack@dev.com',
    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: '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;
}
复制代码

有一些技巧能够处理这种混乱的对象结构。

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，能够作到这一点。可是在轻量级前端项目中，特别是若是你只须要这些库中的一两个方法时，最好选择另外一个轻量级库，或者编写本身的库。

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。