在 JavaScript ES6 中，引入了新的语法来简化对象属性的访问：对象解构和箭头函数。但是当我们需要在一个非常深的对象层级中访问一个属性时，可能需要使用多个 if 语句或者通过抛出异常来避免访问 null 或 undefined 属性。这样的写法不仅显得冗长而且容易出错。
在 ES2020 中，我们可以使用 Optional Chaining 来简化这样的代码。本文将详细介绍 Optional Chaining 的用法和使用的场景。
什么是 Optional Chaining
Optional Chaining 是一个新的 JavaScript 特性，它允许我们简化访问一个深层对象属性时，需要写的冗长代码。我们可以通过在属性访问路径上加上问号 ? 来表明这条路径上的属性是可选的。
示例：
假如我们有这样一个对象：
----- --- - -
----- -------
---- ---
-------- -
--------- ------------
----- ----------
-
--我们要获取该对象中的 city 属性，可以使用以下的代码：
------ -- ----------- -- ------------------ ------------------------------ -- -------- -
使用 Optional Chaining 可以将这段代码变得更加简洁：
-------------------------------- -- --------
这里的问号表明 address 属性和 city 属性都是可选的。
Optional Chaining vs 三元运算符
我们可以通过三元运算符来避免访问 null 或 undefined 的属性。但是，使用 Optional Chaining 的代码要更加简洁，可读性也更高。下面是一个比较：
三元运算符：
----- ---- - --- -- ----------- - ---------------- - ----------
Optional Chaining：
----- ---- - -------------------
Optional Chaining vs try/catch
我们也可以通过 try/catch 来避免访问 null 或 undefined 的属性。但是，这种方法会产生额外的开销，并且不能保证代码一定会很重要：
try/catch：
--- ----- --- - ---- - ----------------- - ----- ------- - ---- - ---------- -
Optional Chaining：
----- ---- - -------------------
使用 Optional Chaining 访问数组元素
在 JavaScript 中，我们也可以使用 Optional Chaining 来访问数组元素。假如我们有一个数组：
----- --- - --- -- ---
我们想要访问这个数组的第四个元素，可以使用以下的代码：
------ -- ---------- - --- -------------------- -
使用 Optional Chaining 可以将这段代码变得更加简单：
----------------------
使用场景
使用 Optional Chaining 是为了在我们访问一个深度嵌套的对象时，代码更加简洁。在以下情况下，使用 Optional Chaining 可以提高代码的可读性。
处理不完整的对象
我们有时候会在对象中缺少某些属性。如果我们在访问这些属性时没有使用 Optional Chaining，会导致程序出错。
假如我们没有获取到一个用户的 email 地址，这个 email 属性可能是 undefined。这时候，我们就可以使用 Optional Chaining 来简化代码：
----- ----- - ------------
遍历一个层级很深的对象
假如我们要对一个很深的对象进行遍历，使用 Optional Chaining 就可以让代码变得更加简洁：
----- -------- - -------------------------- ----- -------- - --------------------------
处理动态的对象属性
假如我们不能确定对象中是否有某个属性，或者不知道该属性是否是可访问的，使用 Optional Chaining 就可以避免程序崩溃：
----- ----------- - ----------------------------
总结
Optional Chaining 是一个微小但却很实用的特性，在访问深嵌套的对象时能变得非常方便。它可以让代码变得更加简洁，可读性更强。
当我们需要访问一个对象属性时，使用 Optional Chaining 是一个更加稳妥的选择。它可以避免我们的程序崩溃，并且代码也更加简洁易懂。在某些情况下，Optional Chaining 也能够让我们的代码更加高效。
记住，Optional Chaining 可以帮助我们简化代码，但是它并不是万能的。在某些情况下，使用传统的 if 语句或三元运算符可能更加恰当。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6455d0fe968c7c53b0931c1b