为什么我喜欢 JavaScript 可选链

第一种形式的 object.property 用于访问静态属性：

const object = null; 
object?.property; // => undefined 

第二种形式 object?.[expression] 用于访问动态属性或数组项：

const object = null; 
const name = 'property'; 
object?.[name]; // => undefined 

const array = null; 
array?.[0]; // => undefined 

最后，第三种形式 object?.([arg1, [arg2, ...]]) 执行一个对象方法：

const object = null; 
object?.method('Some value'); // => undefined 

如果需要，可以将这些形式组合起来以创建长的可选链：

const value = object.maybeUndefinedProp?.maybeNull()?.[propName]; 

5.短路：在null/undefined 处停止

可选链运算符的有趣之处在于，一旦在其左侧 leftHandSide?.rightHandSide 上遇到空值，就会停止对右侧访问器的评估。这称为短路。

看一个例子：

const nothing = null; 
let index = 0; 
 
nothing?.[index++]; // => undefined 
index;              // => 0 

nothing 保留一个空值，因此可选链立即求值为 undefined，并跳过右侧访问器的求值。因为 index 的值没有增加。

6. 何时使用可选链

要抵制使用可选链运算符访问任何类型属性的冲动：这会导致错误的用法。下一节将说明何时正确使用它。

6.1 可能无效的访问属性

必须仅在可能为空的属性附近使用 ?.： maybeNullish?.prop。在其他情况下，请使用老式的属性访问器：.property 或 [propExpression]。

调用电影对象。查看表达式 movie.director?.name，因为 director 可以是 undefined，所以在 director 属性附近使用可选链运算符是正确的。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!