在 JavaScript 中，当我们试图访问一个未定义或 null 的属性时，会抛出 TypeError 错误。这在开发过程中是很常见的情况，但是它会导致代码中断，并且需要我们手动处理异常情况。ES9 中引入了可选链操作符，使得我们可以更轻松地处理这种情况，避免 TypeError 错误的发生。
什么是可选链操作符
可选链操作符是一种简洁的语法，用于访问可能为 null 或 undefined 的属性或方法。它使用问号（?）来表示属性或方法的存在性，如果属性或方法存在，就会返回其值，如果不存在，就会返回 undefined。
下面是一个简单的例子：
----- ------ - -
----- -------
-------- -
----- ---- ------
---- -----
-
--
--------------------------------- -- --- ----
----------------------------------- -- ---------- ------ ---- -------- -------- -- ---------在上面的例子中，当我们尝试访问 person.address.street 时，会抛出 TypeError 错误，因为 address 对象中没有 street 属性。为了避免这种情况，我们可以使用可选链操作符：
------------------------------------ -- ---------
在上面的代码中，我们使用了可选链操作符 ?. 来访问 person.address.street 属性。如果 address 对象不存在，就会返回 undefined。
如何使用可选链操作符
可选链操作符可以用于访问属性、方法或数组元素。下面是一些使用可选链操作符的例子：
访问属性
----- ------ - -
----- -------
-------- -
----- ---- ------
---- -----
-
--
---------------------------------- -- --- ----
------------------------------------ -- ---------调用方法
----- ------ - -
----- -------
---------- -
------------------- -- ---- -- ---------------
-
--
-------------------- -- ------ -- ---- -- ----
---------------------- -- ---------访问数组元素
----- ---- - --- -- --- ----------------------- -- - ----------------------- -- ---------
使用可选链操作符的注意事项
虽然可选链操作符可以避免 TypeError 错误的发生，但是在使用它时，我们需要注意一些事项：
可选链操作符只能用于 ES9 或更高版本
如果你的项目需要兼容旧版浏览器或 Node.js 版本，那么可选链操作符可能无法正常工作。在这种情况下，你需要使用其他方法来避免 TypeError 错误的发生，比如使用条件语句或者使用第三方库。
可选链操作符只能用于访问属性或方法
虽然可选链操作符可以用于访问数组元素，但是它只能用于访问数组的索引，而不能用于访问数组的方法。比如，下面的代码是无效的：
----- ---- - --- -- --- -------------- -- ------------ ---------- ----- ---
可选链操作符不能用于赋值或删除属性
可选链操作符只能用于访问属性或方法，不能用于赋值或删除属性。比如，下面的代码是无效的：
----- ------ - -
----- -------
-------- -
----- ---- ------
---- -----
-
--
-------------------- - ---- --------- -- ------------ ------- --------- ---- -- ----------
------ -------------------- -- ------------ ------ -- -- ----------- ---------- -- ------ -----结论
可选链操作符是一个非常实用的 ES9 新特性，它可以避免 TypeError 错误的发生，使得我们的代码更加健壮和可读。在使用可选链操作符时，我们需要注意版本兼容性和语法限制，以免出现意外的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673ab17539d6d08e88af5da4