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

旧城等待， 2022-01-12 00:59 70阅读 0赞

> 译者：前端小智
> 
> 原文：[javascriptkicks.com/articles/23…][javascriptkicks.com_articles_23]

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

**想阅读更多优质文章请[猛戳GitHub博客][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…][GitHub]

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

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

转载于:https://juejin.im/post/5d0824c0f265da1bd04ee1bb

[javascriptkicks.com_articles_23]: https://link.juejin.im?target=https%3A%2F%2Fjavascriptkicks.com%2Farticles%2F236734%2Faccessing-nested-objects-in-javascript
[GitHub]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fqq449245884%2Fxiaozhi
[Typy]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fflexdinesh%2Ftypy