在 JavaScript 中访问嵌套对象

tldr； 以超酷的方式安全地访问 JavaScript 中的嵌套对象。

JavaScript 很棒，这一点我们都知道。但是 JavaScript 中也有一些非常奇怪的特性，让我们摸不着头脑。其中之一就是当你尝试访问嵌套对象时遇到的这个错误。

无法读取未定义的属性“foo”

大多数时候，当我们使用 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 userCity = user.personalInfo.address.city;

这很简单、直接。

但是，由于某种原因，如果我们的用户的个人信息不可用，对象结构将会像这样，

const user = {
    id: 101,
    email: 'jack@dev.com'
}

现在，如果您尝试访问该名称，您将被抛出无法读取未定义的属性“名称”。

const name = user.personalInfo.name; // Cannot read property 'name' of undefined

这是因为我们试图name从不存在的对象访问键。

大多数开发人员处理这种情况的通常方法是，

const name = user && user.personalInfo ? user.personalInfo.name : null;
// undefined error will NOT be thrown as we check for existence before access

如果你的嵌套结构很简单，这还可以，但是如果你的数据嵌套了 5 或 6 层深度，那么你的代码看起来就会非常混乱，就像这样，

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;

有了这种表示法，你永远不会遇到“无法读取 undefined 的属性‘name’”这样的错误。你基本上会检查用户是否存在，如果不存在，就动态创建一个空对象。这样，下一级键总是可以从存在的对象或空对象访问，而不会从 undefined 访问。

不幸的是，你不能用这个技巧访问嵌套数组

使用数组 Reduce 访问嵌套对象

数组 reduce 方法非常强大，可以用来安全地访问嵌套对象。

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

// pass in your object structure as array elements
const name = getNestedObject(user, ['personalInfo', 'name']);

// to access nested array, just pass in array index as an element the path array.
const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
// this will return the city from the first address item.

典型

如果你觉得上面的方法有点太主流了，那么你应该试试我写的Typy库。除了安全地访问嵌套对象之外，它还能做很多很棒的事情。🎉

它以 npm 包的形式提供 - 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，可以做到这一点。但在轻量级前端项目中，尤其是当你只需要这些库中的一两个方法时，最好选择其他轻量级库，或者更好的是，自己编写一个。

祝您“安全地访问 JavaScript 中的嵌套对象”！💥

鏂囩珷鏉ユ簮锛�https://dev.to/flexdinesh/accessing-nested-objects-in-javascript--9m4