前言

ES2020是ECMAScript在2020年完成的提案，这个版本新增的特性不如ES6那么多，但是也增加了不少非常实用的操作，其中就包括本文要介绍的可选链(?.)和空位合并操作符(??)。

各版本的ECMAScript已完成提案及最新提案可以看这里

可选链

语法： obj?.attrA?.attrB

作用：在访问深层次的树形结构的属性时不需要进行冗余的前置校验

举例：假设某个项目的订单详情接口返回的数据是这样的

const orderDetail = {
     // 订单商品数据
    goods: [...], // 有数据时返回一个数组
    goods: null, // 没有数据时返回null
    // ... 一些其他信息
}

对于这样的数据如果不使用可选链的话我们想要去访问商品数据就需要做一些前置校验，否则会出现语法错误：

// 取值时需要做一次值校验
const goods = orderDetail && orderDetail.goods && orderDetail.goods.map(...)

如果层级嵌套很深的话那就需要对每一层级都做一个兼容，会显得非常繁琐。可选链的出现就是为了解决这一现象。

使用可选链访问代码就会简洁许多：

// 相当于上面的写法
const goods = orderDetail?.goods?.map(...)

注意：两种写法的区别在于：当goods的值为null时，可选链操作返回的时undefined；进行前置校验操作的返回值为 null。

原因：可选链操作实际上相当于进行三目运算符判断，如：

a?.b

// ===== 等价于

(a === null || a === undefined) ? undefined : a.b

可选链可链式调用：

a?.b?.c  

// ===== 等价于

(a === null || a === undefined) ? undefined : (a.b === null || a.b === undefined) ? undefined : a.b.c

// ===== 也等价于

a && a.b && a.b.c

注意： 只有可选链左侧的值为 undefined 或者 null 时，表达式的结果为 undefined，可选链才不会继续执行后面的操作。其他值都会继续执行，包括 0、fasle等。

let a = 0;
// Uncaught TypeError: a?.func is not a function
a?.func()

let b = null;
// 不会报错，返回undefined
b?.func();

空值合并操作符

语法：a ?? b

作用：逻辑操作符，当左侧值为 null 或 undefined 时则返回右侧的值。

对比：空值合并操作符(??) 和 逻辑或操作符(||) 作用类似，区别在于 ||操作符针对所有 假值，而 ??只针对 null 和 undefined。

const a = false;

let r1 = a || '123'; // ===> r1 输出 '123'

let r2 = a ?? '123'; // === r2 输出 false

可以发现 ?? 和 ?. 都是只针对 null 和 undefined 这两个值的，也就是说他们俩可以完美的结合使用:

let obj = {};

let r3 = obj?.name ?? '可选链+空值合并操作符'; // === r3 输出 '可选链+空值合并操作符'

注意： 空值合并操作符(??) 不能和 与(&&)、或(||) 操作符一起使用(因为空值合并操作符和其他逻辑操作符之间的执行优先级是未定义的)

总结

不要沉浸在日常的CRUD工作中，JavaScript是基础也是重中之重，还是需要多花时间去了解和学习的。