前言

可选链和控制合并运算符是 ES2020 规范新增的语法，给属性的访问和函数的调用带来的方便。

前置概念

1. nullish：值为 null 或者 undefined。
2. falsy：值为 null、undefined、0、''和false。
3. truly：非 falsy 的值。
4. &&：逻辑与操作符，形如leftExpr && rightExpr。leftExpr 为 truly 时，执行rightExpr并作为返回值。leftExpr 为 falsy 时，短路操作，并把 leftExpr的值作为返回值。
5. ||：逻辑或操作符，形如leftExpr || rightExpr。leftExpr 为 truly 时，短路操作，并把 leftExpr的值作为返回值。leftExpr 为 falsy 时，执行 rightExpr并作为返回值。

可选链操作符（Optional Chaining Operator）

语法

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

描述

在普通的属性访问符. 和 []的前面加上? or ?. ，组成?. or ?.[]，访问数组时使用 arr?.[0]，调用函数时使用 fn?.()

当 obj 为 nullish 时，表达式短路并返回 undefined。

实例

let obj= {}

我们要访问 obj 对象的 sub 的 name属性，name 属性不存在，抛出错误！

console.log(obj.sub.name) //  TypeError: Cannot read properties of undefined

因此我们需要这样写，防止报错：

console.log(obj.sub && obj.sub.name) // undefined

如今，借助可选链操作符，我们以简洁的语法达到同样的效果：

console.log(obj.sub?.name) // undefined

与函数调用一起使用时，如函数不存在，也返回 undefined。

console.log(obj.sub?.say?.()) // undefined

访问数组成员

let arr = ['a','b']
console.log(arr?.[1]) // 'b'
console.log(arr?.[2]) // undefined

空值合并运算符（Nullish Coalescing Operator）

语法

leftExpr ?? rightExpr

描述

当 leftExpr是 nullish 时，返回rightExpr，否则返回leftExpr。

与逻辑或运算符 || 不同，逻辑或操作符会在左侧操作数为 falsy 时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子。

实例

console.log('' ?? 'default string') // ""
console.log('' || 'default string') // "default string"
console.log(0 ?? 42) // 0
console.log(0 || 42) // 42

总结

可以看到空位合并运算符 ?? 和可选链运算符 ?.一样，都是针对的 null 和 undefined 这两个 nullish空值。