可选链运算符

可选链运算符是 2019 年 12 月纳入 ECMAScript 标准中的新特性。TypeScript 3.7 版本增加了对可选链运算符的支持，因此我们可以在 TypeScript 3.7 及以上的版本中直接使用该运算符。

当尝试访问对象属性时，如果对象的值为 undefined 或 null，那么属性访问将产生错误。为了提高程序的健壮性，在访问对象属性时通常需要检查对象是否已经初始化，只有当对象不为 undefined 和 null 时才去访问对象的属性。可选链运算符旨在帮助开发者省去冗长的 undefined 值和 null 值检查代码，增强了代码的表达能力。

基础语法

可选链运算符由一个问号和一个点号组成，即 “?.”。可选链运算符有以下三种语法形式：

  • 可选的静态属性访问。

  • 可选的计算属性访问。

  • 可选的函数调用或方法调用。

可选的静态属性访问

可选的静态属性访问语法如下所示：

obj?.prop

在该语法中，如果 obj 的值为 undefined 或 null，那么表达式的求值结果为 undefined；否则，表达式的求值结果为 obj.prop。

可选的计算属性访问

可选的计算属性访问语法如下所示：

obj?.[expr]

在该语法中，如果 obj 的值为 undefined 或 null，那么表达式的求值结果为 undefined；否则，表达式的求值结果为 obj[expr]。

当使用方括号与属性名的形式来访问属性时，你也可以使用可选链运算符：
let nestedProp = obj?.["prop" + "Name"];
可选链访问数组元素
let arrayItem = arr?.[42];

可选的函数调用或方法调用

可选的函数调用或方法调用语法如下所示：

fn?.()

在该语法中，如果 fn 的值为 undefined 或 null，那么表达式的求值结果为 undefined；否则，表达式的求值结果为 fn()。

短路求值

如果可选链运算符左侧操作数的求值结果为 undefined 或 null，那么右侧的操作数不会再被求值，我们将这种行为称作短路求值。在下例中，由于变量 a 的值为 undefined，因此第 4 行中的变量 x 将不会执行自增运算：

let x = 0;
let a = undefined;

a?.[++x];  // undefined
x;         // 0

值得一提的是，二元逻辑运算符 && 和 || 也具有短路求值的特性。