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 相关文章推荐
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
VSCode搭建Vue项目的方法
Apr 30 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
js评分组件使用详解
2017/06/06 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
Python yield使用方法示例
2013/12/04 Python
Python中如何获取类属性的列表
2016/12/26 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python实现两个文件合并功能
2018/04/01 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Django后台admin的使用详解
2019/07/08 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
公司任命书模板
2014/06/06 职场文书
小学见习报告
2015/06/23 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
golang生成并解析JSON
2022/04/14 Golang
Android Studio 计算器开发
2022/05/20 Java/Android