随着前端应用程序的复杂度增加，大量代码都涉及访问对象中的属性和方法。然而，在访问这些对象的属性和方法时，常常会遇到空指针异常。空指针异常在 JavaScript 中表示为 TypeError：cannot read property ‘x’ of undefined。这种异常会导致程序崩溃，并且极难调试。因此，ES2020 通过可选链操作符提供了一种解决方案，可使代码更具健壮性，本文将详细介绍如何使用。
可选链操作符是什么
可选链操作符（Optional chaining operator）是在 ES2020 中引入的一个重要特性。它主要用于解决对象属性不存在导致的异常问题。在访问对象属性时，如果对象不存在，则不会抛出异常，而是返回 undefined。
如何使用可选链操作符
可选链操作符 ?. 可以用于访问深层嵌套的属性和方法，例如：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -------
-
-
--
------------------------- -- -- -------
------------------------- -- -- ---------
------------------------- -- -- ---------在上述示例中，?. 操作符代表的是对对象属性或方法的可选访问，即属性或方法是否存在都不会产生异常。当访问不存在的属性或方法时，返回 undefined。
除了对象的属性访问，可选链操作符还可以用于数组的索引访问，例如：
const arr = [1, 2, 3]; console.log(arr?.[0]); // 输出 1 console.log(arr?.[10]); // 输出 undefined
在上述示例中，通过 ?. 操作符访问数组索引时，如果索引超出了数组长度，则返回 undefined。
可选链操作符的优势
可选链操作符的优势在于提高代码的健壮性和保证程序的稳定性。当程序中需要访问数据结构中的属性或方法时，通过可选链操作符提供可选访问的机制，即使数据结构发生变化或出现 null 或 undefined 的情况，程序也不会崩溃。
下面，我们将看一下使用可选链操作符解决空指针异常的实际代码示例：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
----- ----------
-
--
-------- ----------------- -
------ ------------------- -- ----------
-
------------------------------- -- -- ----------
------------------------------- -- -- ---------通过上述示例中的 getUserCity 函数我们可以看出，通过可选链操作符访问用户地址所属的城市时，如果用户数据不存在或用户地址数据缺失或程序发生异常情况，程序将返回 'unknown' 值。
相较于传统的错误捕获机制，在代码的可读性和可维护性上有所提高。在以后的开发过程中，使用可选链操作符将会更有利于代码的优化和性能的提高。
总结
在本文中，我们介绍了 ES2020 的可选链操作符，以及它如何用于避免空指针异常。通过使用可选链操作符，可以极大地提高代码的健壮性和保持程序的稳定性。当访问深层嵌套的属性或方法时，应该优先考虑使用可选链操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c85d925ad90b6d04135fa4