在前端开发中，我们经常需要处理对象中的嵌套属性或方法，但是当使用嵌套属性或方法时，如果对象不存在或者为空，就会导致程序崩溃。为了解决这个问题，TypeScript 2.0 引入了可选链操作符 ?.，它可以帮助我们简化代码并避免程序崩溃。
可选链操作符简介
可选链操作符 ?. 可以在访问对象属性或方法时，判断对象是否为 null 或 undefined，如果是，则返回 undefined，而不是抛出 TypeError 异常。这样，我们就可以避免在访问对象属性或方法时出现错误，从而提高程序的稳定性和可靠性。
下面是可选链操作符的语法示例：
obj?.prop // 访问属性 obj?.method() // 调用方法
如果 obj 为 null 或 undefined，上述代码将返回 undefined，否则将正常访问属性或方法。
可选链操作符的使用场景
可选链操作符主要用于访问对象属性或方法时，判断对象是否为 null 或 undefined，避免程序崩溃。下面是一些使用场景的示例：
访问嵌套属性
在访问嵌套属性时，如果中间的对象不存在或为空，就会导致程序崩溃。使用可选链操作符可以避免这个问题，例如：
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- ----------
------- ---------- --------
--
--
-------------------------------- -- ---------
----------------------------------- -- ---------调用嵌套方法
在调用嵌套方法时，如果中间的对象不存在或为空，就会导致程序崩溃。使用可选链操作符可以避免这个问题，例如：
-- -------------------- ---- -------
----- ---- - -
----- --------
------------- ------ -
------ --------- --------- --------
--
--
--------------------------------- -- --------- --------- -------
------------------------------- -- ---------迭代嵌套数组
在迭代嵌套数组时，如果中间的数组不存在或为空，就会导致程序崩溃。使用可选链操作符可以避免这个问题，例如：
-- -------------------- ---- -------
----- ----- - -
-
----- --------
-------- ----------- -------------
--
-
----- ------
--
--
------------------------------------ -- ---------
------------------------------------ -- ---------可选链操作符的注意事项
在使用可选链操作符时，需要注意以下几点：
- 可选链操作符只能用于访问对象属性或方法，不能用于访问变量或函数。
- 可选链操作符只能用于 TypeScript 2.0 及以上版本，不能用于旧版本的 TypeScript 或 JavaScript。
- 可选链操作符只能用于编译时静态检查，不能用于运行时动态判断。如果要动态判断对象是否为 null 或 undefined，可以使用传统的 if 判断语句。
可选链操作符的示例代码
下面是一个使用可选链操作符的示例代码：
-- -------------------- ---- -------
--------- ---- -
----- -------
--------- -
----- -------
------- -------
--
------------ -------
-
----- ----- ---- - -
----- --------
-------- -
----- ----------
------- ---------- --------
--
---------- -
------ -------------
--
--
-------------------------------- -- ---------
----------------------------------- -- ---------
------------------------------- -- ------------
----------------------------- -- ---------在上述代码中，我们定义了一个接口 User，它包含一个可选的 address 属性和一个可选的 getPhone 方法。然后，我们创建了一个 user 对象，并使用可选链操作符访问它的属性和方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da2feaa941bf71341ef0e4
