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