在JavaScript中如何访问暂未存在的嵌套对象
前言
JavaScript是个很神奇的东西。但是JavaScript中的一些东西确实很奇怪,让人摸不着头脑。其中之一就是当你试图访问嵌套对象时,会遇到这个错误
Cannotreadproperty'foo'ofundefined
在大多数情况下,处理嵌套的对象,通常我们需要安全地访问最内层嵌套的值。来个粟子:
constuser={ id:101, email:'jack@dev.com', personalInfo:{ name:'Jack', address:{ line1:'westwishst', line2:'washmasher', city:'wallas', state:'WX' } } }
当我们要访问user里面的name及city时,我们会这样写。
constname=user.personalInfo.name; constuserCity=user.personalInfo.address.city;
这是简单而直接的。
但是,由于某种原因,user中的personal不可用,对象结构将是这样的:
constuser={ id:101, email:'jack@dev.com' }
现在,如果你在试着访问name,将会得到一个Cannotreadproperty'name'ofundefined的错误。
constname=user.personalInfo.name;//Cannotreadproperty'name'ofundefined
这是因为我们试图访问对象中不在的key为name的属性。
大多数开发人员处理这种情况的常用方法如下,
constname=user&&user.personalInfo?user.personalInfo.name:null;
如果你的嵌套结构很简单,这是可以的,但是如果数据嵌套五或六层深,那么你的代码就会看起很混乱:
letcity; if( data&&data.user&&data.user.personalInfo&& data.user.personalInfo.addressDetails&& data.user.personalInfo.addressDetails.primaryAddress ){ city=data.user.personalInfo.addressDetails.primaryAddress; }
有一些技巧可以处理这种混乱的对象结构。
OliverSteele的嵌套对象访问模式
这是我个人的最爱,因为它使代码看起来干净简单。我从stackoverflow中选择了这种风格,一旦你理解它是如何工作的,它就非常吸引人了。
constname=((user||{}).personalInfo||{}).name;
使用这种表示法,永远不会遇到无法读取未定义的属性“name”。做法是检查用户是否存在,如果不存在,就创建一个空对象,这样,下一个级别的键将始终从存在的对象访问。
不幸的是,你不能使用此技巧访问嵌套数组。
使用数组Reduce访问嵌套对象
Arrayreduce方法非常强大,可用于安全地访问嵌套对象。
constgetNestedObject=(nestedObj,pathArr)=>{ returnpathArr.reduce((obj,key)=> (obj&&obj[key]!=='undefined')?obj[key]:null,nestedObj); } //将对象结构作为数组元素传入 constname=getNestedObject(user,['personalInfo','name']); //要访问嵌套数组,只需将数组索引作为数组元素传入。. constcity=getNestedObject(user,['personalInfo','addresses',0,'city']); //这将从addresses中的第一层返回city
Typy
如果你认为上面的方法太过非主流,那么可以使用Typy库。除了安全访问嵌套对象之外,它还可以做很多很棒的事情。
如果使用Typy,代码将如下所示
importtfrom'typy'; constname=t(user,'personalInfo.name').safeObject; constcity=t(user,'personalInfo.addresses[0].city').safeObject; //addressisanarray
这里还有一些其他的库,如Lodash和Ramda,可以做到这一点。但是在轻量级前端项目中,特别是如果你只需要这些库中的一两个方法时,最好选择另一个轻量级库,或者编写自己的库。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对毛票票的支持。