es11、12新增特性

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