在开发前端应用时，我们常常会遇到一个问题：当我们需要对一个对象的某个属性进行取值时，如果这个对象为空或者该属性不存在，那么程序就会crash。而且在实际开发中，这种情况非常常见，既麻烦又易出错。而 ECMAScript 2019 中的 optional chaining 操作符可以很好地解决这个问题。
optional chaining 它是什么？
ECMAScript 2019 中引入的 optional chaining 操作符（?.）可以简化属性访问的代码，同时也可以有效地防止在代码中出现访问 null，undefined 或者不存在的属性而导致整个应用程序崩溃。
使用 optional chaining 操作符可以在访问对象的属性的时候使代码更加灵活，同时也更加可读。
ECMAScript 2019 中的 optional chaining 操作符只在目标对象不是 undefined 和 null 时执行，否则就会直接返回 undefined。因此，我们可以更自如地访问对象或数组的属性或元素。
如何使用？
使用 optional chaining 操作符非常简单，在访问对象的属性或者数组元素之前加上问号（?）即可，如果该属性或者元素不存在，那么会返回 undefined。
示例如下：
-- -------------------- ---- -------
----- --- - -
----- -------
---- ---
----- -
-------- ----------
------ -------
-
--
-- ------
----- ----- - --------------- -- -------
-- -------- -------- -----
----- ----- - ----------------- -- -------
-- -- ---- -------- ---------
----- ---- - ------------- -- ---------在什么情况下会用到 optional chaining 操作符？
实际上，在访问对象的属性时，我们常常不知道该属性是否存在，如果其中一个层级不存在的话，代码就会出错，这是开发者非常不愿意看到的。而 optional chaining 操作符可以避免这种情况的发生。
下面是实际情况中经常会出现的一些代码示例：
- 访问嵌套对象的属性
-- -------------------- ---- -------
----- --- - -
----- -------
----- -
-------- ----------
------ -------
-
--
-- ----
----- ----- - ---------------
-- -------- -------- -----
----- ----- - ------------------ 访问数组中的属性
-- -------------------- ---- -------
----- --- - -
-
----- -------
---- ---
------- ----
--
-
----- ------
---- ---
------- ----
-
--
-- ----
----- ------ - --------------
-- -------- -------- -----
----- ------ - ---------------- 访问多层级的属性
-- -------------------- ---- -------
----- --- - -
----- -------
----- -
--------- -
----- ---------
-
-
--
-- ----
----- ---- - -----------------------
-- -------- -------- -----
----- ---- - --------------------------总结
在开发中，为了尽可能减少代码 bug 的出现，我们需要写出更加健壮和可靠的代码。而 optional chaining 操作符可以很好地帮助我们避免许多不必要的错误。在实际开发中，我们应该尽可能地使用它，以此来使我们的代码可读性更高，可维护性更强。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485740348841e98944474e9