专栏首页终身学习者如何在JavaScript中访问暂未存在的嵌套对象

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

腾讯云 热门云产品限量特惠秒杀,云服务器1核2G,99元/1年

海外1核2G服务器低至2折,半价续费券限量免费领取!

新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。

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里面的namecity时,我们会这样写。

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

这里还有一些其他的库,如 LodashRamda,可以做到这一点。但是在轻量级前端项目中,特别是如果你只需要这些库中的一两个方法时,最好选择另一个轻量级库,或者编写自己的库。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 8个有用的JS技巧

    这些技巧可能大家大部分都用过了,如果用过就当作加深点映像,如果没有遇到过,就当作学会了几个技巧。

    前端小智@大迁世界
  • JavaScript 的简洁之道

    如果你关注代码本身和代码的编写方式,而不是只关心它是否能工作,那么你写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码,而不仅仅只编写当前能工...

    前端小智@大迁世界
  • JS 10个 常用的技巧和鲜为人知的特性

    JS是一门发展迅速的语言,正因如此,有些新的特性和功能,咱们没有办法在第时间内知道。在这篇文章中,咱们主要探讨一些少有人知道的特性还有一些常用技巧。

    前端小智@大迁世界
  • shel脚本批量添加用户,首次登陆强制修改密码

    企业里常用到脚本来批量管理很多用户,这些也可以理解为自动化管理。为企业之后自动运维部署做准备。 #!/bin/bash #description:userad...

    BGBiao
  • 8个有用的JS技巧

    这些技巧可能大家大部分都用过了,如果用过就当作加深点映像,如果没有遇到过,就当作学会了几个技巧。

    前端小智@大迁世界
  • 64000张汽车图片,再也没有理由说做汽车项目没有数据了

    关于汽车的项目很多,比如拍照识车、汽车比价等等,尽管这些项目本身难度不大,但是往往受制于数据集的质量,模型的效果不能很好的发挥。

    大数据文摘
  • 论终端品牌域名的重要性

      “那当然有用了,没有栏杆护着,掉下去怎么办?”

    躲在树上的域小名
  • RansomWeb:一种新兴的网站威胁

    越来越多的人成为勒索软件的受害者,勒索软件是一种加密你的数据并要求支付资金解密的恶意软件。最新趋势表明,网络犯罪分子现在也将瞄准您的网站以获得您的赎金。

    用户1196457
  • Solidity如何通过代码减少gas消耗

    我们知道,在以太坊上的交易gas是有上限的,因此也是比较昂贵的,特别是针对一些复杂业务的处理,随着业务数据的增长,有可能会导致gas超高,甚至业务无法进行操作。

    用户1161110
  • TIMSDK 常见问题

    构建消息元素后,实例化一个 TIMMessage 对象,然后调用 addElement() 方法构建到 TIMMessage 消息对象中,不推荐在同一个消息对象...

    腾讯云-ahqzhang

扫码关注云+社区

领取腾讯云代金券