资讯专栏INFORMATION COLUMN

[Frontend Tips] JS: Optional Chaining, 再也不怕一长串的属性调

K_B_Z / 1676人阅读

摘要:刚才看了下一个新特性,这是干啥用的呢过去在属性链的调用中,很容易因为某个属性不存在而导致之后出现的错误。要注意操作符是,而不是多带带的。类似的,如果需要取属性链中某函数并执行,就应该是。

刚才看了下一个 JS 新特性——「Optional Chaining」,这是干啥用的呢?

过去在 Object 属性链的调用中,很容易因为某个属性不存在而导致之后出现Cannot read property xxx of undefined的错误。

const obj = {
    qwe: {
        asd: {
            zxc: "666"
        }
    }
}

console.log(obj.qwe.asd.zxc); // 666
console.log(obj.abc.def.ghi); // Uncaught TypeError: Cannot read property "def" of undefined...

那 optional chaining 就是添加了?.这么个操作符,它会先判断前面的值,如果是 null 或 undefined,就结束调用、返回 undefined。

console.log(obj?.abc?.def?.ghi); // undefined

要注意操作符是?.,而不是多带带的。因此,如果属性链中取某个 Array 的元素,应该是obj?.qwe?.arr?.[0]。类似的,如果需要取属性链中某函数并执行,就应该是obj?.qwe?.func?.()

这个特性可以说是非常实用了,不过它现在处于 stage-1 阶段,估计进入标准还有段时间。不过 Babel v7 beta 已经添加了此特性的插件,想现在用起来的同学可以安装起来。

Reference

babel/packages/babel-plugin-proposal-optional-chaining at master · babel/babel

tc39/proposal-optional-chaining

Optional Chaining may be coming to JavaScript

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92985.html

相关文章

  • js判断鼠标进入容器的方向小解

    摘要:有不对的地方,或者有更好的理解,请告诉我,谢谢原理以容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以,,,,,,,划分为四个象限,鼠标进入容器时的点的值在这四个象限里分别对应容器边框的下,右,上,左。 $(#wrap).bind(mouseenter mouseleave,function(e) { var w = $(this).width(); var h...

    fantix 评论0 收藏0
  • 精读《Optional chaining

    摘要:由于具备一定的使用场景,而且支持方式零成本改写为即可,所以就支持它吧不支持的特性下面三个特性不支持,原因是没什么使用场景安全的安全的上面两者的结合首先看一个对象,如果出来的结果是,那这个返回值使用起来也没有意义。 1. 引言 备受开发者喜爱的特性 Optional chaining 在 2019.6.5 进入了 stage2,让我们详细读一下草案,了解一下这个特性的用法以及讨论要点。 ...

    cncoder 评论0 收藏0
  • 走近正则:仿Nodejs的Url模块到前端

    摘要:正则学起来说真的,不去正儿八经的学正则,对付一般的工作是没啥问题的,虽然我们可能会经常用到,但毕竟度娘能提供大多时候你想要的可当我看一些框架的源码,总会被里面一长串一长串的正则给吓到之前一篇博客里有关于简单的爬虫实践,其实离达到我预期的效果 正则学起来 说真的,不去正儿八经的学正则,对付一般的工作是没啥问题的,虽然我们可能会经常用到replace,但毕竟度娘能提供大多时候你想要的;可当...

    HitenDev 评论0 收藏0
  • 避免取值时出现Cannot read property 'xx' of unde

    摘要:由于是以空函数为代理对象,我们可以将执行它,触发。中会遍历数组依次取值,如果发现无法继续取值则,跳出循环。 本文来自我的博客,欢迎大家去GitHub上star我的博客 我们在取值特别是链式取值的时候,常常会遇到Cannot read property xx of undefined的错误,如何避免这种情况的发生呢?这里有几种方法以供参考 使用成熟的库方法 这是最简单的一种手段:只用引入...

    fantix 评论0 收藏0
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串

    摘要:若是偶数,返回的数值字符串都是短的,若是奇数,则返回的将是一个很大长度的表示值。若则都是数字组成,才会包含字母。 在项目中可能需要随机生成字母数字组成的字符,如生成3-32位长度的字母数字组合的随机字符串(位数不固定)或者生成43位随机字符串(位数固定) 使用Math.random()与toString()方法的结合 先看一下这个方式: Math.random().toString(3...

    zhangrxiang 评论0 收藏0

发表评论

0条评论

K_B_Z

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<