在前端开发中，我们经常需要对对象或数组进行深层次的属性或元素访问。如果这些属性或元素不存在，我们需要进行判断，避免程序崩溃。ES11 中新增的 Optional Chaining 操作符可以简化这一过程，本文将介绍它的使用场景与注意事项。
Optional Chaining 操作符
Optional Chaining 操作符（?.）是一个可选的链式操作符，用于判断一个对象是否存在某个属性或方法。它可以避免在访问不存在的属性或方法时抛出 TypeError 异常，而是返回 undefined。
下面是一个使用 Optional Chaining 操作符的示例代码：
----- --- - -
------ -
------ -
------ -------
-
-
--
----- ----- - ------------------------
------------------- -- -------
----- -------- - ------------------------
---------------------- -- ---------在上面的代码中，我们使用 Optional Chaining 操作符访问了一个嵌套的对象属性。当属性存在时，它返回属性的值；当属性不存在时，它返回 undefined。
使用场景
Optional Chaining 操作符适用于访问嵌套的对象属性或方法，尤其是在对象的结构比较复杂时，可以简化代码的编写。
例如，我们可以使用 Optional Chaining 操作符来访问 React 组件的 props：
-------- ------------------ - ----- ----- - ------------------- ------ ------------------- -
在上面的代码中，我们使用 Optional Chaining 操作符访问了 props 对象中的 data 属性，如果 data 不存在，它会返回 undefined，避免程序崩溃。
注意事项
在使用 Optional Chaining 操作符时，需要注意以下几点：
- Optional Chaining 操作符只能用于访问对象属性或方法，不能用于访问变量或函数。
- Optional Chaining 操作符不能用于赋值操作，例如 obj?.prop = value 是无效的。
- Optional Chaining 操作符只能在支持 ES11 的环境下使用，如果需要在旧版本的浏览器中使用，需要通过 Babel 或其他工具进行转换。
总结
Optional Chaining 操作符是 ES11 中新增的一个可选的链式操作符，用于判断一个对象是否存在某个属性或方法。它可以简化代码的编写，避免程序崩溃。在使用时需要注意它的使用场景和注意事项。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663835afd3423812e4639bc2