在前端开发中，我们经常需要处理从后端接收到的数据。这些数据通常是嵌套的对象或数组，而我们需要在代码中访问这些数据的属性或元素。然而，如果数据中某些属性或元素不存在，我们的代码可能会崩溃，因为 JavaScript 会抛出 TypeError 异常。
为了避免这种情况，ES11 (2020) 引入了一种新的操作符：可选链操作符（Optional Chain Operator）。这个操作符可以让我们安全地访问嵌套对象或数组中的属性或元素，避免代码崩溃和浪费性能。
可选链操作符的使用
可选链操作符是一个问号 ? 后面跟一个点 .，用于访问对象或数组的属性或元素。它的语法如下：
object?.property array?.[index]
其中，object 是一个对象，property 是一个属性名；array 是一个数组，index 是一个数组下标。在这个操作符中，? 表示如果 object 或 array 为 null 或 undefined，则不执行后面的代码，直接返回 undefined。
下面是一个例子，通过可选链操作符访问一个嵌套对象的属性：
-- -------------------- ---- -------
----- ---- - -
----- -
----- --------
-------- -
----- ----------
--------- ---------
--
--
--
----- -------- - ------------------------------ -- --------在这个例子中，如果 data、data.user 或 data.user.address 中任何一个为 null 或 undefined，postcode 将会赋值为 undefined，而不会抛出 TypeError 异常。
同样，我们也可以通过可选链操作符访问一个嵌套数组的元素：
const list = [1, 2, 3]; const element = list?.[3]; // undefined
在这个例子中，如果 list 中没有第四个元素，则 element 将会被赋值为 undefined。如果我们使用传统的数组访问方式 list[3]，则会抛出 IndexError 异常。
可选链操作符的优点
可选链操作符有以下几个优点：
避免代码崩溃
使用可选链操作符可以避免因为访问不存在的属性或元素而导致代码崩溃。这种情况在处理从后端接收到的数据时尤其常见。如果一个嵌套对象或数组中的某个属性或元素不存在，我们通过可选链操作符访问它时，代码不会崩溃，而是返回 undefined。
简化代码逻辑
传统的处理方式是使用条件语句判断某个属性或元素是否存在，如果存在再访问，这让代码变得冗长且难以阅读。而可选链操作符可以简化这个过程，让代码更加简洁易懂。例如：
// 传统的处理方式
let id;
if (data && data.user && data.user.id) {
id = data.user.id;
}
// 使用可选链操作符
const id = data?.user?.id;提高代码性能
使用可选链操作符不仅可以避免代码崩溃，还可以提高代码性能。在传统的处理方式中，我们可能需要写多个条件语句来判断一个属性或元素是否存在，每个条件语句都会影响代码的性能。而可选链操作符只会执行一次，不会浪费性能。
总结
可选链操作符是 ES11 (2020) 中的一个新特性，可以让我们更加安全地访问嵌套对象或数组中的属性或元素，避免代码崩溃和浪费性能。它的优点包括避免代码崩溃、简化代码逻辑和提高代码性能。在实际开发中，我们应该尽可能地使用可选链操作符，以提高我们的代码质量和效率。
示例代码
-- -------------------- ---- -------
-- ------
----- ---- - -
----- -
----- --------
-------- -
----- ----------
--------- ---------
--
--
--
-- ------------
----- -------- - ------------------------------
---------------------- -- --------
-- ------
----- ---- - --- -- ---
-- ------------
----- ------- - ----------
--------------------- -- ---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9acbdf6b2d6eab311fb4d