空值合并操作符(??) 和可选链操作符(?.)

空值合并操作符(??)

空值合并操作符 ?? 类似于 || 运算符，当其左侧的操作数为 null 或者 undefined 时，返回右侧的操作数，否则返回左侧的操作数。

看下面的例子：

const value = value1 ?? value2;
// 等价于
const value = (value1 === undefined || value1 === null) ? value2 : value1;

const val1 = null ?? 'test' // test
const val2 = undefined ?? 'test' // test

从定义上看，空值合并操作符 ?? 类似于 || 运算符，但是是很不同的，看接下来的几个例子：

const val3 = 0 ?? 'test' // 0
const val4 = '' ?? 'test' // ''
const val5 = NaN ?? 'test' // NaN
const val6 = false ?? 'test' // false

|| 左侧的操作数会被强制转换成布尔值。因此，当使用 || 时，需要考虑左侧是否为 0, '', NaN, false 等值，如果为这几个值时，可能会出现非预期的结果。

注意，当 ?? 直接与 && 或 || 组合使用时，必须加上括号，否则会抛出 SyntaxError。

null || undefined ?? "default"; // Uncaught SyntaxError: Unexpected token '??'
(null || undefined ) ?? "default"; // 返回 "default"

可选链操作符(?.)

可选链操作符(?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效

看下面的例子：

const obj = {};

const value = obj.first?.second;
等价于:
const value =  ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);

当然，函数调用也可以：

const value = obj.test?.();

搭配空值合并操作符使用，也很方便：

const value = obj.first?.second ?? 'default value';

也可以使用数组和方括号的表达式的形式访问：

const key = 'test'
const value = obj?.[key];

const valueAt12 = arr?.[12];

当然，可选连操作符可以连着使用：

const value = obj.first?.second?.third.forth;

搭配空值合并操作符使用，效果更佳：

const value = obj.first?.second ?? 'default value';

注意：
可选链操作符不能用于赋值

obj.first?.second = 'second'; // Uncaught SyntaxError: Invalid left-hand side in assignment

Can I Use?

空值合并操作符(??)

Data on support for the mdn-javascript__operators__nullish_coalescing feature across the major browsers

可选链操作符(?.)

Data on support for the mdn-javascript__operators__optional_chaining feature across the major browsers

babel

babel 也有两个插件处理这种操作：

• @babel/plugin-proposal-nullish-coalescing-operator
• @babel/plugin-proposal-optional-chaining

参考

• MDN: Nullish coalescing operator (??)