在前端开发中，我们经常会遇到对象的属性或方法不存在而导致的 TypeError 错误。在 ES11 中，新增了可选链式调用（Optional Chaining）的语法，可以很好地解决这个问题。本文将详细介绍可选链式调用的用法，并提供示例代码和指导意义。
什么是可选链式调用
可选链式调用是一种新的语法，可以让我们在对象的属性或方法不存在时，不会抛出 TypeError 错误，而是返回 undefined。这种语法使用问号 ? 表示可选属性或方法，可以在对象的属性或方法不存在时安全地访问。
下面是一个使用可选链式调用的示例：
----- ------ - -
----- --------
-------- -
----- ----------
-
--
----- ---- - ---------------------
------------------ -- ----------
----- ------- - ------------------------
--------------------- -- ---------在上面的示例中，我们使用可选链式调用访问了 person.address 对象的 city 属性。如果 person.address 对象不存在，那么 city 变量会被赋值为 undefined。同样，我们使用可选链式调用访问了 person.address 对象的 country 属性，由于 person.address 对象不存在 country 属性，所以 country 变量的值也是 undefined。
可选链式调用的用法
使用可选链式调用的语法非常简单，只需要在要访问的属性或方法的前面加上问号 ? 就可以了。下面是一些常见的用法：
访问对象属性
----- ------ - -
----- --------
-------- -
----- ----------
-
--
----- ---- - ---------------------
------------------ -- ----------
----- ------- - ------------------------
--------------------- -- ---------调用对象方法
----- ------ - -
----- --------
---------- -
------------------- -- ---- -- ----------------
-
--
-------------------- -- ------- -- ---- -- -------访问数组元素
----- ------- - --- -- --- ----- ----- - ------------- ------------------- -- - ----- ------ - ------------- -------------------- -- ---------
调用数组方法
----- ------- - --- -- --- ----------------- --------------------- -- --- -- -- --
可选链式调用的指导意义
使用可选链式调用可以避免因为对象的属性或方法不存在而导致的 TypeError 错误，从而让我们的代码更加健壮和安全。但是，我们也要注意可选链式调用的一些限制和注意事项：
- 可选链式调用只能在对象或数组的最后一层使用，不能在中间层使用。
- 可选链式调用不能用于函数调用的参数上。
- 可选链式调用不能用于赋值语句的左边。
下面是一个不正确的示例：
----- ------ - - ----- -------- -------- ---- -- ----- ---- - ---------------------- -- ---------- ------ ---- -------- ------ -- ----
在上面的示例中，我们使用了可选链式调用访问了 person.address 对象的 city 属性。但是，由于 person.address 的值为 null，所以访问 city 属性时会抛出 TypeError 错误。
总结
可选链式调用是一种非常实用的语法，可以避免因为对象的属性或方法不存在而导致的 TypeError 错误。在实际开发中，我们应该注意可选链式调用的一些限制和注意事项，合理地使用这种语法，让我们的代码更加健壮和安全。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65685c85d2f5e1655d125ff9