ES12 在 Vanilla JavaScript 中引入了一个新的特性：Optional Chaining（可选链），它解决了开发者在访问对象的属性或者方法时，经常出现的 TypeError 的问题，让代码更加健壮和安全。
问题描述
在 JavaScript 中，我们常常需要访问对象的属性或者方法。例如：
----- ------ - -
----- --------
-------- -
----- ---- ------
-------- ------
--
--
----- -------- - --------------------
---------------------- -- ------- -----但是，当我们访问一个不存在的属性时，会抛出一个 TypeError 异常，例如：
----- --- - ----------- -- ---------- ------ ---- -------- ----- -- ---------
这是因为 person 对象中没有 age 属性，所以返回 undefined。当我们尝试访问 undefined 对象的一个不存在的属性时，就会产生 TypeError。
为了避免这个异常，我们需要在使用对象属性或方法之前，对其进行判断：
----- ---- - ------ -- -------------- -- -------------------- ------------------ -- ------- -----
这样，如果 person 对象或者 person.address 对象不存在，city 变量都会被赋值为 undefined，而不会产生 TypeError 异常。
然而，这种写法非常麻烦，尤其是在代码中存在多层嵌套时，会使代码变得难以维护和阅读。
Optional Chaining 解决问题
Optional Chaining （可选链）可以使这种判断更加简单和直观。我们可以直接使用问号 ? 来进行属性或方法的访问，如果这个对象不存在，就会直接返回 undefined。
例如：
----- --- - ----------------------- ----------------- -- ------------
这里，我们使用 ? 来访问 age 属性和 toString() 方法，如果 age 属性不存在，就会直接返回 undefined，而不会抛出 TypeError 异常。这样，就避免了繁琐的判断。
另外，Optional Chaining 还支持链式调用。例如：
----- ------- - -------------------------------------------- --------------------- -- --------
这里，我们使用了多个 ?，表示 person 对象，address 对象，以及 getCountry() 方法都可能不存在。如果这些对象或者方法不存在，就直接返回 undefined。
代码示例
下面是一个完整的代码示例，展示了 Optional Chaining 如何简化代码：
----- ------ - -
----- --------
-------- -
----- ---- ------
-------- ------
------------ -
------ -------------
--
--
--
-- ------
----- ----- - ------ -- -------------- -- --------------------
------------------- -- ------- -----
----- ---- - ---------- -- ----------------------
------------------ -- ------------
----- -------- - -------------- -- ------------------------- -- ------------------------------------------
---------------------- -- --------
-- -- -------- --------
----- ----- - ---------------------
------------------- -- ------- -----
----- ---- - -----------------------
------------------ -- ------------
----- -------- - --------------------------------------------
---------------------- -- --------
-- --------
----- ----- - ----------------
------------------- -- ------------
----- ---- - -----------------
------------------ -- ------------从示例代码可以看出，Optional Chaining 不仅可以简化代码，还能避免代码中出现的 TypeError 异常。
结论
Optional Chaining 是 ES12 中非常有用的新特性，能够大幅简化代码并避免 JavaScript 中经常出现的 TypeError 异常。使用 Optional Chaining，可以使代码更加健壮和安全。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673257f20bc820c5823ced22