TypeScript可选链运算符

可选链运算符是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]。

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

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

fn?.()

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

短路求值

如果可选链运算符左侧操作数的求值结果为undefined或null，那么右侧的操作数不会再被求值，我们将这种行为称作短路求值。

在下例中，由于变量a的值为undefined，因此第4行中的变量x将不会执行自增运算：

function add(x: number, y: number): number {
    return x + y;
}

let x = 0;
let a = undefined;
let b = ['google','baidu','coolcou'];

console.log(a?.[++x]);
console.log(b?.[2]);
console.log(add?.(5,8));

输出结果：

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

酷客网相关文章：

• TypeScript解构
• TypeScript 展开运算符
• TypeScript BigInt
• TypeScript函数