在前端开发中，我们经常需要操作对象的属性和方法。然而，当我们访问一个不存在的属性或方法时，代码会崩溃，并抛出 TypeError 异常。这在开发过程中是非常常见的问题，也是很令人头痛的一件事情。
但是，在 ECMAScript 2021 中引入了一个新的特性：Optional Chaining，可以很好的解决这个问题。在本文中，我们将详细介绍 Optional Chaining 的用法，学习如何在代码中使用它，避免代码 Crash 的问题。
什么是 Optional Chaining
Optional Chaining 是 ECMAScript 2021 引入的一个新特性，可以安全地访问可能为 null 或 undefined 的属性。这种访问方式不会崩溃代码，而是返回 undefined。
以前，我们通常使用 if 条件语句来检查属性是否存在，保证代码的健壮性。然而，这种方式需要写大量的重复代码，代码量增加，可读性降低。而 Optional Chaining 则可以避免这种情况的发生，使代码更加简洁和易于理解。
如何使用 Optional Chaining
在代码中使用 Optional Chaining 很简单，只需要在访问属性或方法的时候，使用问号（?）来标识这个属性或方法可能不存在：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- ----------
--------- ----------
--
--
-- ----
-- --------------- -- -------------------- -
---------------------------------
-
-- -- -------- --------
----------------------------------以上代码中，我们访问了 person 的 address 属性，并且使用了 Optional Chaining 对 city 进行访问。这样写的好处是，如果 address 属性不存在，或者 city 属性不存在，代码不会崩溃，而是返回 undefined。
Optional Chaining 的深度访问
当我们需要访问深度嵌套的对象属性时，使用 Optional Chaining 也可以很好地处理。我们只需要在对象属性之间添加问号即可，如下所示：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- ----------
--------- -
----- ----------
------- -
----- ------ --------
--
--
--
--
---------------------------------------------------- -- ------ -------
------------------------------------------- -- ---------在以上代码中，我们使用了多个问号，操作了深度嵌套的对象属性。如果属性链中任何一个属性不存在，代码将返回 undefined。
Optional Chaining 与函数的结合使用
除了访问对象属性外，Optional Chaining 还可以与函数的返回值进行结合使用，以确保调用方不会崩溃。
-- -------------------- ---- -------
----- ------ - -
----- ------
---------- -
------------------- -- ---- -- ---------------
--
--
--------------------------------- -- ------- -- ---- -- ----
----------------------------------- -- ---------在以上代码中，我们调用了 person 的 sayHello 方法，并使用了 Optional Chaining 语法。如果 sayHello 方法不存在，代码将返回 undefined。
总结
在开发过程中，避免程序 Crash 是我们需要重点考虑的事情之一。使用 Optional Chaining 可以很好地解决这个问题，为我们的代码增加了健壮性和可读性。
在使用 Optional Chaining 时，我们要注意语法的使用，以保证代码的正确性和健壮性。同时，我们还需要与团队成员合作，制定规范，保证代码的一致性。
以上就是 Optional Chaining 的详细介绍和使用方法。希望这篇文章可以帮助大家更好地理解和学习 Optional Chaining，并在实际开发中加以运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c9e0965ad90b6d04187157