在 Web 前端开发中，我们经常要操作对象。但是，对于包含嵌套的对象，如果我们需要访问它们的某个属性，我们需要经过多次判断来确保对象及其各个嵌套属性的存在性。这个过程反复琢磨，让人感到痛苦和无聊。
为了简化这个过程，JavaScript 在 ES11 中引入了“可选链”语法，它允许我们在对象操作的过程中快捷地进行多次校验，以避免操作不存在的属性导致的错误。这个新特性的语法基于 ?. 操作符，以代码行 object?.property 的形式出现。
可选链基础
如果我们有一个对象如下所示：
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--如果想要获取 user 对象中的 address 属性中的 zip 值，通常我们需要使用多次校验：
if (user && user.address && user.address.zip) {
console.log(user.address.zip);
} else {
console.log("Zip code not found.");
}而在 ES11 中，我们可以使用可选链简化这个过程：
console.log(user?.address?.zip ?? "Zip code not found.");
可选链告诉 JavaScript 不要在 user 对象不存在 address 属性或 address 对象不存在 zip 属性时执行操作，而是直接跳过它们，并返回 undefined 值。如果 zip 值不存在，我们可以使用 ?? 空值合并操作符来提供一个默认值。
可选链的使用场景
可选链的语法让对象操作更加简洁，更加直观。此外，它还可以帮助我们解决许多令人烦恼的问题，例如：
链式方法调用
在现代 JavaScript 中，很多函数返回值都是对象，在对这些对象进行链式调用时，我们需要手动进行嵌套的方法调用。不过，可选链的语法也可以应用于方法调用，从而减少代码嵌套深度。例如：
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
------------ ---------- -
------ ----------
--
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- --------
--------------- ---------- -
------ ---------------- ------------- ------------- -------------
-
-
--
----------------------------------- -- -------
----------------------------------------------- -- ---- ---- --- -------- -- ------减少语法错误
在使用对象属性时，特别是在深度嵌套属性时，我们经常会犯一些错误。如果属性不存在，我们会在代码运行时遇到错误。但是通过使用可选链，我们可以快速地定位错误，并且代码更加易于理解，如下所示：
const user = {
name: "Alice",
age: 32,
address: null
};
console.log(user?.address?.zip); // undefined
console.log(user.address.zip); // TypeError: Cannot read property 'zip' of null从上面的例子中可以看出，使用可选链避免了因为 address 为 null 导致的 TypeError 错误。
动态键名
在对象属性访问中，键名常常是不能确定的，如果使用传统的判断方式，代码逻辑容易浪费并变得混乱。而可选链这个新特性使得我们可以更加灵活、简明地处理以上问题。
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
------ -
--------- -------------------
-
--
----- --- - -----------
------------------------------- -- -------------------
------------------------------------------------ -- -------------------总结
可选链语法是 ES11 中一项非常实用的新特性，它可以让我们在对象操作中快速简单地进行多次校验，并且大大减少了代码嵌套深度，同时也更加健壮和安全地处理一些容易导致错误的边界场景。在日常开发中，应该熟练掌握这项技术，并且深入地理解它的使用场景，以便更加高效地编写 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bfd21c9e06631ab9c4f4b8