「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。 可选链是对嵌套对象属性执行访问检查的一种安全而简洁的方法。
可选的链接运算符?.将引用指向其左侧并检查它是否未定义或为空。如果引用是这些空值中的任何一个，则检查将停止并返回未定义。否则，访问检查链将继续沿着幸福的路径到达最终值。
// An empty person object with missing optional location information
const person = {}
// The following will equate to undefined instead of an error
const currentAddress = person.location?.address
ES2020 中引入了可选链接。根据TC39，它目前处于提案过程的第 4 阶段，并准备好包含在最终的 ECMAScript 标准中。这意味着你可以使用它，但请注意，较旧的浏览器可能仍需要使用 polyfill。
可选链接是一个有用的功能，可以帮助你编写更简洁的代码。现在让我们学习如何使用它。
可选链接语法
在本文中，我将主要介绍如何访问对象属性。但是你也可以使用可选链接来检查功能。
以下是可选链接的所有用例：
obj?.prop // optional static property access
obj?.[expr] // optional dynamic property access
func?.(...args) // optional function or method call
来源：MDN 网络文档
例子：
const value = obj?.propOne?.propTwo?.propThree?.lastProp;
在上面的代码片段中，我们正在检查是否obj为 null 或未定义，然后propOne，然后propTwo，等等。可选链名副其实。在对象属性访问链中，我们可以检查每个值是否未定义或为空。
在访问深度嵌套的对象值时，此检查非常有用。这是一个备受期待的功能，它使你不必进行大量的空检查。这也意味着你不需要使用临时变量来存储检查值，例如：
const neighborhood = city.nashville && city.nashvile.eastnashville;
在这里，我们可以在尝试访问 的内部邻域属性之前检查它nashville是内部的属性。我们可以将上面的内容转换为使用可选链接，如下所示：city``eastnashville
const neighborhood = city?.nashville?.eastnashville;
可选链接简化了这个表达式。
使用可选链接的错误处理
在处理 API 数据时，可选链接特别有用。如果你不确定是否存在可选属性，则可以使用可选链。
一个谨慎的词
不要一有机会就使用可选链。这可能会导致在许多地方返回未定义的潜在错误，从而导致静默错误。
同样重要的是要记住，检查将在遇到空值时停止并“短路”。考虑到链中的后续属性以及如果无法访问它们会发生什么。
当你知道某些内容可能没有值（例如可选属性）时，最好使用此检查。如果一个必需的值有一个空值检查，它可能会被静音并返回未定义而不是返回一个错误来提醒这个问题。
可选链接 + 无效合并
可选的链接对与无效合并很好??地提供后备值。
const data = obj?.prop ?? "fallback string";
const data = obj?.prop?.func() ?? fallbackFunc();
如果左边的项??为空，则返回右边的项。
我们知道，如果任何?.检查等同于链中的空值，它将返回undefined. 所以我们可以使用我们的无效合并来响应未定义的结果并设置一个明确的后备值。
const meal = menu.breakfast?.waffles ?? "No Waffles Found."
包起来
可选链是 JavaScript 最近的一个方便的特性，它允许您在访问属性值时检查空值。你也可以将它与?.运算符一起使用。
