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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
Angular实现响应式表单
Aug 04 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
vue全局使用axios的操作
Sep 08 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
PHP STRING 陷阱原理说明
2010/07/24 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
smarty内置函数section的用法
2015/01/22 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
vue.js中created方法作用
2018/03/30 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
python如何提升爬虫效率
2020/09/27 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
结婚周年感言
2014/02/24 职场文书
小学生元旦感言
2014/02/26 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS