es11 & es12
—es11—
链式判断运算符:?.
如果读取对象内部的某个属性,往往需要判断一下该对象是否存在,比如获取list.info.base.userName
的值
// 错误写法,当多层结构中某一层级值为null或undefined时,会报错
const userName = list.info.base.userName;
// 正常情况下的处理方法
const userName = (
list &&
list.info &&
list.info.base &&
list.info.base.userName
) || 'userName';
使用链合并运算符,就可以简化上面的写法。
const userName = list?.info?.base?.userName || 'userName';
Null判断运算符:??
||
或运算符表达的意思是左侧表达式为null
、undefined
、''
、false
、0
,右侧表达式都会生效。但我们想要的只是在null
或undefined
的时候生效。
es2020引入了新的Null判断运算符??
。它的行为类似||
,但是只有运算符左侧的值为null
或undefined
时,才会返回右侧的值。
—es12—
复合赋值运算符
现有的的运算符,其工作方式都可以如此来理解
表达式:a op= b
等同于:a = a op b
// 例子
a += b
//等价于
a = a + b
逻辑运算符和其他的复合赋值运算符工作方式不同
表达式:a op= b
等同于:a = a op (a = b)
// 例子
a ||= b
//等价于
a = a || (a = b)
a &&= b
//等价于
a = a && (a = b)
a ??= b
//等价于
a = a ?? (a = b)
复合赋值运算符的应用
??=
可用来补充/初始化缺失的属性
const pages = [
{
title:'主会场',
path:'/'
},
{
path:'/other'
},
...
]
for (const page of pages){
page.title ??= '默认标题'
}
处理完以后数据渲染效果如下
序号 | 标题 | 路径 |
---|---|---|
0 | 主会场 | / |
1 | 默认标题 | /other |
数字分隔符
数字分隔符,可以在数字之间创建可视化分隔符,通过_
下划线来分割数字,使数字更具可读性
const money = 1_000_000_000
//等价于
const money = 1000000000
const totalFee = 1000.12_34
//等价于
const totalFee = 1000.1234