JS的条件式属性访问

JS的条件式属性访问

ES2020增加了两个新的属性访问表达式

expression?.identifier
expression?.[expression]

在JS中, null和undefined是唯一两个没有属性的值. 在使用普通的属性访问表达式时, 如果.或[]左侧表达式求值为null或undefined会报TypeError. 可以使用?.或?.[]防止这种错误发生

比如表达式a?.b, 如果a是null或undefined, 那么整个表达式求值结果为undefined, 不会尝试访问属性b. 如果a是其他值, 则a?.b求值为a.b(如果a没有名为b的属性, 则整个表达式的值还是undefined)

这种形式的属性访问表达式有时候也被称为"可选链接", 因为它也适用于下面这样更长的属性访问表达式链条:

let a = { b: null }
a.b?.c.d // => undefined 

a是个对象, 因此a.b是有效的属性访问表达式, 但是a.b是的值是null, 因此a.b.c会抛出TypeError. 但通过使用?.而非.就可以避免这个TypeError, 最终a.b?.c求值为undefined. 但意味着(a.b?.c).d也会抛出TypeError, 因为这个表达式尝试访问undefined值的属性. 但如果没有括号, 即a.b?.c.d(这种形式是"可选链接"的重要特征)就会直接求值为undefined而不是抛出错误. 这是因为通过?.访问属性是"短路操作": 如果?.左侧的子表达式求值为null或undefined, 那么整个表达式立即求值为undefined, 不会在进一步尝试访问属性.

当然, 如果a.b对象, 且这个对象没有名为c的属性, 则a.b?.c.d仍然会抛出TypeError. 此时应该再加上一个条件式属性访问:

let a = { b: null }
a.b?.c?.d // => undefined

条件式属性访问也可以让我们使用?.[]而非[]. 在表达式a?.[b][c]中, 如果a的值是null或undefined, 则整个表达式立即求值undefined, 子表达式b和c不会被求值, 换句话说, 如果a没有定义, 那么b和c无论谁有副效应, 这个副效应都不会发生:

let a
let index = 0
try {
	a[index++] // 抛出 TypeError
} catch (e) {
	index // 抛出 TypeError 之前发生了递增
}
a?.[index++] // undefined: 因为 a 是 undefined
index // => 1: 因为?.[] 短路 所以没有发生递增
a[index++] // !TypeError: 不能索引 undefined

使用?.和?.[]的条件式属性访问是JS最新的特性之一