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和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
jQuery实现跨域
Feb 03 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
js实现简单选项卡功能
Mar 23 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
咖啡常见的种类
2021/03/03 新手入门
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python中的Django基本命令实例详解
2018/07/15 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
密封类可以有虚函数吗
2014/08/11 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
开除通知书范本
2015/04/25 职场文书
工程进度款催款函
2015/06/24 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
python中mongodb包操作数据库
2022/04/19 Python
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python