ES2020让代码更优美的运算符 (?.) (??)


Posted in Javascript onJanuary 04, 2021

链判断运算符(?.)

非常好用、常用,搭配Null 判断运算符使用,效果更佳,完美!

来,上代码:

我们通常获取一个对象多层的属性值时,需要进行多次的判断。如不判断,一个为空则报错,导致后面无法继续下去。

// error
const firstName = message.body.user.firstName;

// ok
const firstName = (message
 && message.body
 && message.body.user
 && message.body.user.firstName) || 'default';

也可以用三元运算符?:来判断单个值,下面例子中,必须先判断fooInput是否存在,才能读取fooInput.value。

const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined

接着,我们来使用 ?. 运算符看看有多神奇:

const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value

一气呵成,直接在链式调用的时候判断,左侧的对象是否为null或undefined。如果是,就不再往下运算,直接返回undefined

链判断运算符有三种用法。

  • obj?.prop // 对象属性
  • obj?.[expr] // 同上
  • func?.(...args) // 函数或对象方法的调用
"#C0FFEE".match(/#([A-Z]+)/i)?.[1] // 无匹配返回null,匹配则返回一个数组

a?.b
// 等同于
a == null ? undefined : a.b

a?.[x]
// 等同于
a == null ? undefined : a[x]

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()

上面代码中,特别注意后两种形式,如果a?.b()里面的a.b不是函数,那么a?.b()是会报错的。a?.()也是如此,如果a不是null或undefined,但也不是函数,那么a?.()会报错。

使用这个运算符,有几个注意点。

(1)短路机制

?.运算符相当于一种短路机制,只要不满足条件,就不再往下执行。

a?.[++x]
// 等同于
a == null ? undefined : a[++x]

上面代码中,如果a是undefined或null,那么x不会进行递增运算。也就是说,链判断运算符一旦为真,右侧的表达式就不再求值。

(2)delete 运算符

delete a?.b
// 等同于
a == null ? undefined : delete a.b

上面代码中,如果a是undefined或null,会直接返回undefined,而不会进行delete运算。

(3)括号的影响

如果属性链有圆括号,链判断运算符对圆括号外部没有影响,只对圆括号内部有影响。

(a?.b).c
// 等价于
(a == null ? undefined : a.b).c

上面代码中,?.对圆括号外部没有影响,不管a对象是否存在,圆括号后面的.c总是会执行。

一般来说,使用?.运算符的场合,不应该使用圆括号。

(4)报错场合

以下写法是禁止的,会报错。

// 构造函数
new a?.()
new a?.b()

// 链判断运算符的右侧有模板字符串
a?.`{b}`
a?.b`{c}`

// 链判断运算符的左侧是 super
super?.()
super?.foo

// 链运算符用于赋值运算符左侧
a?.b = c

(5)右侧不得为十进制数值

为了保证兼容以前的代码,允许foo?.3:0被解析成foo ? .3 : 0,因此规定如果?.后面紧跟一个十进制数字,那么?.不再被看成是一个完整的运算符,而会按照三元运算符进行处理,也就是说,那个小数点会归属于后面的十进制数字,形成一个小数。

Null 判断运算符(??)

读取对象属性的时候,如果某个属性的值是null或undefined,有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

上面的三行代码都通过||运算符指定默认值,属性的值如果为''或false或0,默认值也会生效。

为了避免这种情况,ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值。

const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;

上面代码中,默认值只有在左侧属性值为null或undefined时,才会生效。

这个运算符的一个目的,就是跟链判断运算符?.配合使用,为null或undefined的值设置默认值。

const animationDuration = response.settings?.animationDuration ?? 300;

上面代码中,如果response.settings是null或undefined,或者response.settings.animationDuration是null或undefined,就会返回默认值300。也就是说,这一行代码包括了两级属性的判断。

这个运算符很适合判断函数参数是否赋值:

function Component(props) {
 const enable = props?.enable ?? true;
 // …
}

// 上面代码等同于
function Component(props) {
 const {
  enable: enable = true,
 } = props;
 // …
}

??有一个运算优先级问题,它与&&和||的优先级孰高孰低。现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。

// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs

上面四个表达式都会报错,必须加入表明优先级的括号。

(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);

(lhs ?? middle) && rhs;
lhs ?? (middle && rhs);

(lhs || middle) ?? rhs;
lhs || (middle ?? rhs);

(lhs ?? middle) || rhs;
lhs ?? (middle || rhs);

ES版本更新的福利

在几个月前的腾讯开发者大会上,有位热心市民向ES开发者请教了这个问题,刚好借这篇文章的话题,在这里分享给大家!

关于ES版本更新,为什么ES5到ES6是大幅度书籍式的更新,此后版本更新只新增稀少的几个新技术?

原因:“怕你们学不动!”

其实,前者的更新方式,要学那么多东西,那么厚的一本天书,会给人一种望而却步的感觉,还没进门就先跪了。

后者来说,只是几个新技术,可能半天一天的,就能完全掌握并大结局了,收获的成就感会更多更快!

到此这篇关于ES2020让代码更优美的运算符 (?.) (??)的文章就介绍到这了,更多相关ES2020 运算符 (?.) (??)内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 面向对象的JavaScript类
May 04 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 #Javascript
手写Vue源码之数据劫持示例详解
Jan 04 #Vue.js
js定时器出现第一次延迟的原因及解决方法
Jan 04 #Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 #Javascript
js正则表达式简单校验方法
Jan 03 #Javascript
vue+vant 上传图片需要注意的地方
Jan 03 #Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 #Vue.js
You might like
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python实现Zabbix-API监控
2018/09/17 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
详解python中index()、find()方法
2019/08/29 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
八年级英语教学反思
2014/01/09 职场文书
英语生日邀请函
2014/01/23 职场文书
服务员岗位职责
2014/01/29 职场文书
圆明园观后感
2015/06/03 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js