在前端开发中，我们经常需要对对象的属性进行访问，但有时候这些属性可能不存在，这时候我们就需要进行一些判断，以避免出现错误。ECMAScript 2020 引入了 Optional Chaining 操作符，可以帮助我们更方便地进行判断，从而优化代码。
Optional Chaining 操作符是什么？
Optional Chaining 操作符是一个 ?.，可以用于访问对象或数组的属性或方法，如果属性或方法不存在，则返回 undefined。
例如，我们有一个对象 person，它有一个属性 name，我们可以这样访问：
----- ---- - ------------
但如果 person 不存在，或者 person 没有 name 属性，会报错。使用 Optional Chaining 操作符可以避免这种错误：
----- ---- - -------------
如果 person 不存在，或者 person 没有 name 属性，返回 undefined。
Optional Chaining 操作符的使用场景
Optional Chaining 操作符适用于以下场景：
- 访问对象的属性或方法时，对象可能不存在。
- 访问对象的属性或方法时，对象的某个属性或方法可能不存在。
例如，我们有一个对象 person，它可能不存在，或者它的 address 属性可能不存在，或者它的 address 属性的 city 属性可能不存在。我们可以这样访问：
----- ---- - ----------------------
如果 person 不存在，或者 person 没有 address 属性，或者 address 没有 city 属性，返回 undefined。
Optional Chaining 操作符的优势
使用 Optional Chaining 操作符可以避免繁琐的判断代码，使代码更简洁、更易读、更易维护。例如，我们有一个函数 getCity，它用于获取一个人的城市：
-------- --------------- -
-- ------- -- -------------- -- -------------------- -
------ --------------------
- ---- -
------ ----------
-
-使用 Optional Chaining 操作符可以简化代码：
-------- --------------- - ------ --------------------- -- ---------- -
Optional Chaining 操作符的注意事项
使用 Optional Chaining 操作符需要注意以下几点：
- Optional Chaining 操作符只能用于访问对象或数组的属性或方法，不能用于访问变量或函数。
- Optional Chaining 操作符不能用于赋值、删除、调用函数等操作。
示例代码
下面是一个使用 Optional Chaining 操作符的示例代码：
----- ------ - -
----- -----
-------- -
----- ----
-
--
----- ----- - ---------------------- -- ----
----- ----- - ----------------------- -- ---------
----- ----- - ------------------------------------- -- ----
----- ----- - -------------------------------------- -- ---------
-------- --------------- -
------ --------------------- -- ----------
-
----------------------------- -- ----
--------------------------- -- ---------
------------------------- -- ---------总结
Optional Chaining 操作符是 ECMAScript 2020 新增的一个非常实用的特性，可以帮助我们更方便地访问对象或数组的属性或方法，避免繁琐的判断代码，提高代码的可读性和可维护性。在实际开发中，我们应该充分利用 Optional Chaining 操作符，优化代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65dac3cb1886fbafa47efd7b