在前端开发中，我们经常需要访问对象的属性或方法。但是当对象的某些属性或方法不存在时，我们的代码就会出现错误。为了解决这个问题，ES11 提出了可选链操作符（Optional Chaining Operator），可以安全地访问可能不存在的对象层。
可选链操作符的语法
可选链操作符使用问号（?）来表示。它可以在对象属性或方法后面加上问号，表示如果该属性或方法不存在，就不会继续访问下去，而是返回 undefined。
下面是可选链操作符的语法：
--------- -- ------- ----------- -- --------- ------------ -- -------
可选链操作符的示例
访问对象的属性
假设有一个对象 person，它有一个 name 属性，但是没有 age 属性。如果我们直接访问 age 属性，就会出现错误：
----- ------ - - ----- ------ -- ------------------------ -- ---------- ------ ---- -------- ----- -- ---------
使用可选链操作符可以避免这个错误：
----- ------ - - ----- ------ -- ------------------------- -- ---------
访问对象的动态属性
有时候我们需要访问对象的动态属性。使用可选链操作符可以避免访问不存在的动态属性时出现错误。
----- ------ - - ----- ------ -- ----- -------- - ------ -------------------------------- -- ---------
调用对象的方法
使用可选链操作符还可以安全地调用对象的方法。假设有一个对象 obj，它有一个方法 func，但是 obj 可能为 null 或 undefined。如果直接调用 func 方法，就会出现错误：
----- --- - ----- ----------- -- ---------- ------ ---- -------- ------ -- ----
使用可选链操作符可以避免这个错误：
----- --- - ----- ------------ -- ---------
可选链操作符的指导意义
使用可选链操作符可以让我们的代码更加健壮。在访问对象的属性或方法时，我们不需要再手动判断对象是否存在，而是可以直接使用可选链操作符，让代码更加简洁清晰。
下面是一个使用可选链操作符的示例：
----- ------ - -
----- ------
-------- -
----- -----------
--
--
----------------------------------- -- ----------
--------------------------------------- -- ---------在这个示例中，我们使用了可选链操作符访问 person 对象的 address 属性，然后再访问 address 对象的 city 属性。如果 address 属性不存在，就会返回 undefined。
总结
可选链操作符是 ES11 中新增的一个特性，可以安全地访问可能不存在的对象层。使用可选链操作符可以让我们的代码更加健壮，避免出现因为访问不存在的属性或方法而导致的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ddc0fd1886fbafa4b11234