在前端开发中，我们经常需要判断一个对象或者变量中是否存在某个属性或方法。在 ES10 中，新增了 Optional Chaining Operator （可选链操作符），可以更加方便地进行属性不存在的判断。
可选链操作符的语法
可选链操作符是一个问号后跟一个点，如下所示：
obj?.prop
这个语法表示如果 obj 存在，那么就返回 obj.prop，否则返回 undefined。
可选链操作符还支持调用方法：
obj?.method()
这个语法表示如果 obj 存在，那么就调用 obj.method()，否则返回 undefined。
可选链操作符的应用场景
可选链操作符可以很好地解决属性不存在的判断问题，避免了使用繁琐的 if 判断语句，提高了代码的简洁性和可读性。
比如，我们经常需要判断一个对象是否存在某个属性：
if (obj && obj.prop1 && obj.prop1.prop2) {
// do something
}使用可选链操作符可以简化这个判断：
if (obj?.prop1?.prop2) {
// do something
}可选链操作符还可以避免出现 TypeError 错误，比如：
let obj = null let value = obj.prop // TypeError: Cannot read property 'prop' of null
使用可选链操作符可以避免这个错误：
let obj = null let value = obj?.prop // undefined
可选链操作符的示例代码
下面是一些使用可选链操作符的示例代码：
-- -------------------- ---- ------- -- ------------- ----- --- - - ------ - ------ ------- - - -- ------------------- - ---------------------------- -- ------- - -- ------------- ----- --- - --- -- -- -- ---------- - ------------------- -- - - -- -------- ----- --- - - ------- -- -- ------- - ---------------------------- -- ------- -- -------- ----- --- - --- -- -- ------------------------ -- - - --- -- --- -- -- -- -- --------- -- --- --- - ---- ---------------------- -- ---------
总结
ES10 中的可选链操作符可以很好地解决属性不存在的判断问题，避免了使用繁琐的 if 判断语句，提高了代码的简洁性和可读性。在实际开发中，我们可以根据具体的场景合理地使用可选链操作符，提高代码的健壮性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e532081886fbafa40e9bc0