概述
在编写 JavaScript 代码时，我们会经常使用对象及其属性的访问方式。然而，访问对象时可能会遇到一些对象不存在或属性不存在导致的错误，这时候我们需要判断对象和属性是否存在再进行访问操作。而 ECMAScript 2021 给我们带来了一种新的操作符——可选链（Optional chaining operator），可以在不抛出异常的前提下直接访问对象及其属性，这极大地简化了代码的书写。
用法
可选链操作符使用问号（ ? ）表示，放在需要访问的对象或属性后面，表示该对象或属性可选。语法如下：
---------------- -------------------- ----------------
上述代码中， object 表示对象， property 表示属性名， expression 表示属性名表达式， method 表示方法名。
可选链操作符 ?. 表示如果 object 存在，就会返回 property 或 expression 对应的值；如果 object 不存在，则返回 undefined。如果要调用方法，则依然按照常规方式使用 ()。
示例
我们通过一个示例来展示可选链如何使用。
假设我们有一个对象 person ，它的属性 address 包含一个 city 属性，如下所示：
----- ------ - -
----- ------
---- ---
-------- -
----- ----------
-
--我们希望获取 person 对象的 address 属性的值，但是有时候 person 不存在或 address 属性不存在。使用可选链操作符，我们可以这样实现获取：
----- ---- - ---------------------- ------------------
上述代码中， person 对象存在且 address 属性存在，所以返回 Shanghai；如果 person 对象不存在或 address 属性不存在，就会返回 undefined。
深入理解
在实际开发中，我们可能会遇到链式访问多个属性或方法的情况。例如，下面的代码需要从 person 对象中访问属性 address ，然后从 address 对象中访问属性 city ，最后调用 toUpperCase 方法将 city 值转换为大写形式：
----- ---- - ----------------------------------
但是，如果 person 对象不存在或 address 属性不存在，这段代码会抛出错误。使用可选链操作符，我们可以这样实现访问：
----- ---- - ------------------------------------- ------------------
这样，如果 person 对象不存在或 address 属性不存在，就会返回 undefined，不会抛出错误。
注意事项
可选链操作符
?.只能用在成员访问操作符.或方括号访问操作符[]后面。可选链操作符
?.可以与其他操作符一起使用，但需要注意优先级。可选链操作符
?.不能用于函数调用的参数列表中。
总结
可选链操作符是 ECMAScript 2021 的一项新功能，能够优化代码的书写，减少代码错因为对象或属性不存在而导致的异常。在开发时，我们应该灵活使用可选链操作符，避免因为对象或属性不存在而导致代码失败的情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664eb186d3423812e4f2c9a3