在 JavaScript 开发中，我们经常需要处理对象的属性或数组元素，而属性或元素可能不存在或者为 undefined，这时候访问他们就会引发错误。为了避免这种情况，ES12 提供了可选链（Optional Chaining）操作符，让我们能够简化代码，更加方便地完成这项工作。本文将介绍 ES12 可选链操作符的使用教程，包括详细的语法和示例代码。
语法
可选链操作符是一个问号后面跟一个点（.）或者方括号（[]）的形式，如下：
---------------- ------------------
如果 object 存在，并且 property 存在，那么表达式返回 object.property 或 object[property] 的值。但如果 object 或 property 不存在，则表达式返回 undefined 而不是抛出一个错误。
示例
访问对象属性
假设我们定义了一个对象 person 和一个方法 getAddress()，person 对象中包含 address 属性，address 属性中包含 city 和 street 属性。如果我们想要访问它们，通常的写法是这样的：
-- ------- -- -------------- -- -------------------- - --------------------------------- - -- ------- -- ----------------- -- -------------------- - --------------------------------- -
这样的代码既冗长又难以维护。使用可选链操作符后，我们可以这样访问属性：
----------------------------------- ------------------------------------
如果 person 或 address 或 getAddress() 不存在，这些表达式将会返回 undefined。
访问数组元素
看下面的示例，数组 arr 包含了名字、年龄和城市属性：
----- --- - - - ----- -------- ---- --- ----- --------- -- - ----- ------ ---- -- -- - ----- ------- ----- ---------- -- --
我们想要访问数组元素的某个属性，需要在访问前检查数组元素是否存在以及是否包含该属性：
-- ---- -- ------ -- ----------- - ------------------------ -
使用可选链操作符，我们可以简化代码：
--------------------------- --------------------------- ---------------------------
总结
使用 ES12 可选链操作符可以简化代码、提高开发效率，避免意外的错误，特别是在处理深度嵌套的对象或数组时尤为重要。本文介绍了可选链操作符的语法和示例，希望能让初学者掌握并运用好这项功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64657c2b968c7c53b062a45d