如何优雅判断属性值为空

想必相似的 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 了。

以为内容有帮助能够关注下个人公众号 「前端真好玩」咯，按期分享如下主题内容：

• 前端小知识、冷知识
• 原理内容
• 提高工做效率
• 我的成长