文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

这个小技巧完全改变了访问JavaScript嵌套对象的方式!

2024-12-10 15:52

关注

JavaScript以众多技巧出名,了解JavaScript的所有技巧几乎不可能。最近在浏览JavaScript的相关文件,阅读相关话题时我又发现了一个从没见过的功能点。我大概不是最后一个学到这个技巧的人,所以我想与各位分享。 它完全改变了我访问嵌套对象的方式!希望它能够帮助到你们。

[[344111]]

技巧

这个技巧就叫做可选链。它实际上是一个操作符,写法是 ?.。根据Mozilla网站文件,可选链操作符的功能是:允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。 简而言之,可选链操作符大大简化了对嵌套对象的访问。直接看这个例子,帮助你更好地理解可选链操作符的作用。 假如有对象“房子(house)”如下:

  1. const house = { 
  2.   price: 1000000, 
  3.   currency:  USD , 
  4.   address: { 
  5.     city:  New York , 
  6.     street:  Main street , 
  7.     postal_code:  1234 AB , 
  8.     state: { 
  9.       name:  New York , 
  10.       abbreviation:  N.Y.  
  11.     } 
  12.   }, 
  13.   owner: { 
  14.     name: "John Doe" 
  15.   } 

通常要按照如下方式访问对象属性:

  1. const currency = house.currency 
  2. const price = house.price 
  3. const owner = house.owner.name 

这是读取对象值的基础。如果房子没有主人呢?我们将无法读取不存在的命名属性,而最后一行代码会引起错误。要想弥补这一点,可以这样做:

  1. const owner = house.owner ? house.owner.name : null 

高手们可以使用空值合并运算符:

  1. const owner = house.owner.name ?? null 

这串代码的问题在于,即使房子这个对象没有主人,它也不会停止运行。看看下面这个例子:

  1. const house = { 
  2.   price: 1000000, 
  3.   currency:  USD , 
  4.   address: { 
  5.     city:  New York , 
  6.     street:  Main street , 
  7.     postal_code:  1234 AB , 
  8.     state: { 
  9.       name:  New York , 
  10.       abbreviation:  N.Y.  
  11.     } 
  12.   }, 
  13.   owner: null 

使用空值合并运算符会造成错误,因为它不能读取属性中为空的命名(name)。使用三元运算符可以运行第一个例子。但如果要探索的属性是多层嵌套的,还需要挨个检查是否存在,那么代码会很冗长,也无法读取。 比如,检查所在州:

  1. const state = house.address &&house.address.state ? house.address.state.name : null 

如你所见,这行代码变得非常长,无法读取。这时可选链操作符就派上了用场。有了它就不再需要检查某个属性是否存在,从而保持代码简明易懂。如果属性不存在则会返回“undefined”。操作符实际看起来是这样的:

  1. const city = house?.address?.city // "New York" 
  2. const nonExisting = house?.roof?.material // Undefined 
  3. const househouseNumber = house?.address?.number // Undefined 
  4. const state = house?.address?.state?.abbreviation // "N.Y." 

是不是一下子就变得很简洁明了!

[[344112]]

图源:unsplash

例一尝试探索“address”属性下“city”属性的值。因为这个属性存在,“城市”属性将会被返回,和使用house.address.city来获取值一样的。 例二尝试获得房顶(roof)建材的信息。然而“house”对象下没有“roof”这一属性,因此返回的是“undefined”,“houseNumber”属性也是同理。虽然“house”对象有“address”属性,这个属性却不包含“number”属性——也就是这里返回了“undefined”的原因。 你也可以使用可选链操作符来动态查询属性,这时需要使用括号:

  1. const someProperty = obj?.[ property-  + propertyName] 

也可以与空值合并运算符一起使用。如果要为一个变量设定默认值,例证如下:

  1. const ownerName = house?.owner?.name ?? "Unknownowner" 

函数

目前只是将可选链操作符与对象结合。但它也可以与函数结合使用。可以用来调取不存在的方法,就像这样:

  1. const result = someObject.customMethod?.(); 

适配

老浏览器支持(如IE浏览器)不支持可选链操作符,和其他现代的JavaScript功能点一样。新浏览器如谷歌、火狐、Opera以及Safari都是支持可选链的,但这不妨碍可选链的使用,需要时可在浏览器中添加polyfill。

使用可选链操作符可以在不确认嵌套对象中每一个引用是否有效的情况下访问链接深处的对象。它最大的优点是运行起来简洁漂亮,不仅适用于对象,也能调用可能不存在的方法。

但请谨记,它不能在IE浏览器中运行——和其他现代JavaScript功能点一样。这些老式浏览器需要添加polyfill才能运行可选链。

JavaScript常学常新,总有新彩蛋夹在里面!

 

来源:读芯术内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯