如何优雅判断属性值为空

如何优雅判断属性值为空这是因为我们尝试从 undefined 或者 null 中取出数据。 解决办法肯定是有的啦,就是使用新语法可选链。 不过这个语法当下还没有正式发布,但是我们可以通过安装 Babel 插件去使用它。 安装完毕后修改下 Babel 配置文件即可。 虽然编译后的代码看着有点啰嗦,但是…

想必类似的 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 代码中会被各种问号所占据。

如何优雅判断属性值为空

最后

虽然题目看着简单,但是考察的内容还是多方面的,当然最想说的还是 fuckJS 了。

觉得内容有帮助可以关注下我的公众号 「前端真好玩」咯,定期分享以下主题内容:

  • 前端小知识、冷知识
  • 原理内容
  • 提升工作效率
  • 个人成长
如何优雅判断属性值为空

今天的文章如何优雅判断属性值为空分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/22204.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注