专栏首页前端达人如何优雅判断属性值为空

如何优雅判断属性值为空

想必类似的 Bug 大家肯定遇见过

这是因为我们尝试从 undefined 或者 null 中取出数据。

解决这种问题其实很简单,假如我们有如下对象:

const a = {
  b: {
    c: 1
  }
}

假设我们现在需要取出 a.b.c,但是并不清楚它们是否都存在,那么代码会写成这样:

if (a && a.b) {
  const c = a.b.c
}

其实这样的代码在项目中出现的频率是很高的,如果需要取的值层级过深的话,代码也会写的很恶心,那么我们是否可以优雅的来解决这个呢?

解决办法肯定是有的啦,就是使用新语法可选链。

不过这个语法当下还没有正式发布,但是我们可以通过安装 Babel 插件去使用它。

npm install --save-dev @babel/plugin-proposal-optional-chaining

安装完毕后修改下 Babel 配置文件即可。

{
   "plugins": ["@babel/plugin-syntax-optional-chaining"]
}

接下来我们就可以使用可选链将上述的代码改造成这样:

const c = a?.b?.c

Babel 会将代码编译成这样:

const c = a === null || a === null ? undefined : a.b === null || a.b === undefined ? undefined : a.b.c

虽然编译后的代码看着有点啰嗦,但是确实很优雅的解决了判空的问题。

不过可选链在某些场景下还是存在坑的,比如如下代码:

const a = {
  b: {
    c: false
  }
}

假如说我们希望在取值 a.b.c 中给 c 设置一个默认值 true

// true
const c = a?.b?.c || true

但是在这个场景下就会出现 Bug,预期值是 false,结果答案为 true

解决这个问题也很简单,再引入一个新语法双问号即可。这个语法的作用和 || 是类似的,但是只有当取值为 null 或者 undefined 时才会使用默认值。

// false
const c = a?.b?.c ?? true

同样双问号也并没有正式发布,但是也是可以通过 Babel 插件解决问题的,具体的安装这里就不过多赘述了。

以上就是本文的内容,说句题外话,感觉以后 JS 代码中会被各种问号所占据。

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-16

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 127个常用的JS代码片段,每段代码花30秒就能看懂(四)

    用于判断参数的值是否是对象,这里运用了Object 构造函数创建一个对象包装器,如果是对象类型,将会原值返回。

    前端达人
  • 127个常用的JS代码片段,每段代码花30秒就能看懂(四)

    用于判断参数的值是否是对象,这里运用了Object 构造函数创建一个对象包装器,如果是对象类型,将会原值返回。

    前端达人
  • 127个常用的JS代码片段,每段代码花30秒就能看懂(三)

    大家好,在前两篇文章里 127个常用的JS代码片段,每段代码花30秒就能看懂(一)和 127个常用的JS代码片段,每段代码花30秒就能看懂(二),我分享了前42...

    前端达人
  • 【Nginx】如何格式化日志并推送到远程服务器?看完原来很简单!!

    作者个人研发的在高并发场景下,提供的简单、稳定、可扩展的延迟消息队列框架,具有精准的定时任务和延迟队列处理功能。自开源半年多以来,已成功为十几家中小型企业提供了...

    冰河
  • springcloud(十):服务网关zuul初级篇

    前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud...

    纯洁的微笑
  • 空间转录组

    近年来空间转录组技术出现在人们的视野中,由于这项技术不仅能够获得转录组的表达信息,同时还能对基因进行定位,因此受到研究者们的追捧。空间转录组技术到底是什么?它有...

    生信交流平台
  • 一步步成为linux大神——bash shell中管道和其他命令分隔符的优先级

    一般在bash中,用“|”作为管道,即pipeline,还可以用“;”之类的分隔符连接多个命令。那么下面这个命令的输出是什么呢? date; who |wc 根...

    大神带我来搬砖
  • 图解LeetCode第 279 号问题: 完全平方数

    给定正整数 n,找到若干个完全平方数(比如 1, 4, 9, 16, …)使得它们的和等于 n。你需要让组成和的完全平方数的个数最少。

    五分钟学算法
  • MySQL表自增id溢出的故障复盘

        tokudb引擎的一个大表tb1,存放业务上的机审日志,每天有大量的写入, 并且由于历史原因,这张表是int signed 类型的,最大只能存 2147...

    二狗不要跑
  • leetcode【14题】Longest Common Prefix

      Write a function to find the longest common prefix string amongst an array of ...

    用户1432189

扫码关注云+社区

领取腾讯云代金券