如何优雅判断属性值为空

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

- END -

专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！

长按关注"前端达人"

如何优雅判断属性值为空相关推荐

SQL insert插入中存在属性值为空
在定义数据库的表的时候,我们知道有些属性我们可以设置让它可以为空,这样可以让我们在某些数据缺失的时候依然将信息插入表中.但是,这就涉及到了一个问题,如果有属性为空,我们在写插入语句的时候该如何写呢?今 ...
java 获取对象属性值为空或者非空的属性名称
目录 1. 获取对象属性值为空的属性名称 2. 复制对象非空属性值 1. 获取对象属性值为空的属性名称 /** * @Title: getNullPropertyNames* @Description ...
java 对象和List 里面的对象判断属性是不是为空
/* 判断对象中属性值是否全为空*/ public static boolean checkObjAllFieldsIsNull(Object object) {if (null == object) ...
php 判断数组值为空,PHP判断数组是否为空的五种常用方法
本文介绍了PHP开发中遇到的数组问题,小编在这里给大家总结了5中方法关于php判断数组是否为空问题,需要的朋友参考下本文介绍了PHP开发中遇到的数组问题,这里介绍了判断PHP数组为空的5种方法,有需 ...
关于ArcGIS中选择属性值为空的语句
关于ArcGIS中选择属性值为null的语句使用Select by Attributes工具编写Where语句选中某字段值为空值的要素使用Select by Attributes工具编写Wher ...
数组转集合，集合去重，删除对象List某个属性值为空的对象，MySql根据某一字段去重
集合和数组的几个问题一.数组怎么转集合二.集合去重怎么做? 三.删除对象集合里,某个属性为空的对象四.数据库查询数据如何按某一个字段去重一.数组怎么转集合 String [] strArr = ...
@JsonSerialize 使用：注解方式实现条件判断属性值、条件修改属性值
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 数据库中是 1.0 记录性别. 预期效果为:当查到属性值为 1 时,就给序列化后的 json ...
Java中将对象中属性值为空字符串设置为null
业务逻辑中需要将对象中为空字符串的属性转换为null,简单的一种方式是前端JS控制,如果为空字符串则不传到后台,后台接收到没有值的属性默认为null.这种方式会导致JS繁琐.下面用后台通过反射的方式来 ...
FastJSON处理对象中属性值为空的数据
1.QuoteFieldNames ---- 输出key时是否使用双引号,默认为true 2.WriteMapNullValue ---- 是否输出值为null的字段,默认为false 3.Write ...

如何优雅判断属性值为空

如何优雅判断属性值为空相关推荐

最新文章

热门文章