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


Posted in Javascript onJune 18, 2019

前言

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,可以做到这一点。但是在轻量级前端项目中,特别是如果你只需要这些库中的一两个方法时,最好选择另一个轻量级库,或者编写自己的库。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 #Javascript
JS删除String里某个字符的方法
Jan 06 #Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 #Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 #Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 #Javascript
js/jQuery实现全选效果
Jun 17 #jQuery
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 #Javascript
You might like
2020最新CPU的性能排名
2020/04/02 数码科技
如何正确理解PHP的错误信息
2006/10/09 PHP
菜鸟学PHP之Smarty入门
2007/01/04 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
javascript实现密码验证
2015/11/10 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
webpack打包js的方法
2018/03/12 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python实现员工管理系统
2018/01/11 Python
Python程序运行原理图文解析
2018/02/10 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
中药学专业毕业生推荐信
2014/07/10 职场文书
绿色小区申报材料
2014/08/22 职场文书
法人授权委托书范本
2014/09/17 职场文书
学习党章的体会
2014/11/07 职场文书
百万英镑观后感
2015/06/09 职场文书