可选链式调用已经到来！

上周我们讨论了空值合并 (Nullish Coalescing)，现在是时候讨论 ECMAScript 的另一个新特性了。

可怕的存在检查

你是否曾经使用过一个充满了格式不一致的对象的 API？这种 API 的层级结构非常复杂，解析起来令人沮丧。让我们用一个小例子来解释一下这个问题。

const obj = {
  node : {
    thing: 1
  }
}

假设我们要访问thing。我们可以这样做。

const thing = obj.node.thing

但是如果我们不能保证它node存在怎么办？如果我们尝试访问，thing就会undefined触发错误。所以我们必须先检查一下。

const thing = obj.node ? obj.node.thing : undefined

这是更简洁的选项，使用三元，但其工作原理相同。

这段代码还算合理！但如果对象嵌套很深，代码就会变得非常重复。

可选链式调用

好吧，我们不必再这样做了。我们可以使用新的可选链式语法。

const thing = obj.node?.thing

在这种情况下，obj.node是undefined。通常，尝试访问thing会undefined触发错误，但在这种情况下不会！当你使用可选链式调用时，它不会抛出该错误，而是将表达式求值为undefined。

更酷的是，我们可以将其与空值合并结合起来。

const obj = {}

const thing = obj.node?.thing ?? 2
// thing will be 2

由于使用可选链式调用会得到undefined，所以thing它会被解析为运算符右侧的值??。在本例中，也就是2。

链式调用可选链式调用

请注意，上面的示例仅使用了一次可选链式调用，以阐明其工作原理。但是，你可以在同一个表达式中多次使用它。

const thing = obj?.node?.thing

上面的表达式是有效的，如果obj看起来像这样，可能会派上用场。

const obj = null

风险

现在，如果不包含关于警告的部分，我就没法写关于可选链式调用的文章了。说实话，很多人真的反对在语言中添加这个功能。他们担心会被滥用，这很正常！

?.不应该替换所有 的实例.。如果这样做，你将导致各种静默失败。可选链式调用只是你的另一个工具，仅此而已。

如果您无法控制所访问的数据，尤其是嵌套的数据，并且即使结果不存在也没关系，那么可选链式调用可能是正确的选择！但请注意前面连续句子中的所有“和”。请确保您明确选择使用此语法。它不应该是您的默认语法。

不仅适用于物体！

哦，我忘了说最精彩的部分了。可选链式调用不只适用于对象！

它适用于数组。

const tenthItem = arr?.[10]

这确保arr在尝试访问第 10 个元素之前存在。

它适用于函数调用。

const message = obj?.stringFunction()

obj在您尝试调用其函数之前，请确保它存在。

它可以与顶级对象一起工作。

functionDoesNotExist?.()

如果该函数不存在，则其计算结果为undefined。

这难道不有趣吗？

这么强大的力量！但请记住，这意味着你有责任明智地使用它！