在前端开发中，我们经常需要从嵌套的对象或数组中访问属性或元素。然而，当我们要访问的对象或数组不存在或为 null 或 undefined 时，会导致 JavaScript 运行时错误。为了解决这个问题，ES2020 引入了可选链调用（optional chaining），它可以帮助我们更加安全便捷地访问对象或数组的属性或元素。
可选链调用的基本语法
可选链调用使用问号（?）来表示，问号前面的内容是要访问的属性或元素，问号后面的内容则是要访问的方法或属性。如果问号前面的内容存在，则会继续访问问号后面的内容；否则返回 undefined。
以对象为例，假设我们要访问的对象为：
const obj = {
a: {
b: {
c: 1,
},
},
};如果我们使用可选链调用来访问 c 属性，则代码可以写作：
const c = obj?.a?.b?.c; console.log(c); // 输出 1
这段代码的意思是，如果 obj 存在 a 属性、a 存在 b 属性、b 存在 c 属性，则返回 c 属性的值；否则返回 undefined。这样我们就可以避免在访问不存在的属性时出现运行时错误。
当然，可选链调用也可以用于访问数组的元素：
const arr = [1, 2, 3]; const elem = arr?.[3]; console.log(elem); // 输出 undefined
这段代码的意思是，如果 arr 存在第 4 个元素，则返回第 4 个元素的值；否则返回 undefined。
可选链调用的细节注意
虽然可选链调用非常方便和安全，但我们在使用它时也需要注意一些细节。
首先，由于可选链调用是 ES2020 规范中新增加的语法，因此它不兼容所有的现代浏览器。在兼容性方面，IE 和 Safari （截至 2021 年 7 月）均不支持可选链调用。因此，在使用可选链调用时，我们需要根据具体的项目需求来决定是否使用 polyfill 或者开启 babel 转换。
其次，可选链调用只能处理 undefined 和 null 的情况，对于其他的 falsy 值，如 0、空字符串和 false 等，仍然会视为存在的值。这一点需要我们在使用时格外注意。
最后，可选链调用只是一个语法糖，与我们用 try/catch 较早实现 Nullish Coalescing 的时候的实现还有一些不同，它并不能完全保证不存在的属性和方法不访问而导致的错误异常。例如，当我们使用可选链调用访问函数时，如果函数内部存在错误，那么仍然可能会导致代码异常。
示例代码
下面是一个使用可选链调用的完整示例代码。
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------- ----- --------
----- ---- ------
-------- --------
--
--
----- ------- - -----------------------
--------------------- -- -- -------
----- ----------- - --------------------
------------------------- -- -- ---------
----- ------------- - --------------------- -- ------
--------------------------- -- -- -----
----- -------- - -------------------
---------------------- -- -- ---------在这个示例代码中，我们使用可选链调用来访问 user 对象中的属性和方法。最后一个例子展示了一个函数的示例，并且使用了 Nullish Coalescing 运算符来处理 undefined 的情况。如果你还不熟悉 Nullish Coalescing 运算符，请阅读我的其他文章 Nullish Coalescing 运算符：优雅地处理 undefined 和 null。
结论
可选链调用是一个非常方便和安全的新语法。它可以帮助我们更加便捷地访问对象和数组的属性和元素，同时避免出现意外的运行时错误。在使用可选链调用时，我们需要注意一些细节，比如兼容性、存在的值类型和语法实现等。细心地使用可选链调用可以帮助我们写出更加健壮和易于维护的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673137bdeedcc8a97c940c2f