ES11 中的可选链式调用 —— 让你快速找到 null 或 undefined 的根源
在前端中，我们经常需要处理从后端 API 返回的数据。但是，有时候我们并不知道 API 返回的数据是否正确地格式化以及是否符合我们的预期。在这种情况下，我们经常需要判断数据的属性是否存在，以避免未定义的错误。而 ES11 中的可选链式调用则可以帮助我们优雅地解决这个问题。
可选链式调用是一种新的语法，它可以让我们像访问普通对象一样访问属性，而不用担心属性不存在的情况。它可以快速找到 null 或 undefined 的根源，从而使我们的代码更加优雅、简洁、可读性更高。
可选链式调用的语法非常简单，就是在属性或方法名后面加上一个问号“?”，如下所示：
object?.property object?.method()
如果 object 对象是 null 或 undefined，那么该属性或方法的调用将停止，并且表达式的值将为 undefined，而不是引发 TypeError。
这是一个例子：
-- -------------------- ---- -------
----- ---- - -
---- ------
---- -
---- -
----- ------
-
-
-
----- --------- - ------------------ -- ------ ------ ---- -------- ------ -- ---------
----- ----------------------------- - -------------------- -- ---------在上面的例子中，我们使用可选的链式调用来访问 data.baz.qux.quux 属性。 如果其中的任何一个属性为 null 或 undefined，则该表达式将返回 undefined。
除了属性之外，可选链式调用还可以用于函数调用中。 在这种情况下，如果函数不存在，则函数调用将停止并返回 undefined：
const data = {
result: () => {
return { value: 'foo' }
}
}
const value = data?.result()?.value; // "foo"在上面的例子中，我们使用了可选链式调用来访问 data.result().value 属性。 如果 result 函数不存在，则该表达式将返回 undefined。
总结一下，可选链式调用是一个非常实用的特性，它可以大大简化我们在处理数据时的代码。它可以快速找到 null 或 undefined 的根源，从而让我们的代码更健壮，更易于维护。
当然，与其他语言功能一样，我们应该根据特定情况和场景来决定是否使用它。有时候它并不是最优解，而是使用条件判断更加合适。我们应该根据具体情况来选择最适合的解决方案。
最后，给出一个稍微复杂一点的使用示例：
-- -------------------- ---- -------
----- ---- - -
----- -------
---- ---
-------- -
-------- --------
----- ----
-
--
----- ---- - ------------------ -- ----------在上面例子中，我们使用了可选链式调用来访问 user.address.city 属性。如果 city 属性为 null 或 undefined，则使用 ?? 运算符，返回 'Unknown'，否则返回 city 的实际值。这样，我们就避免了可能引起异常的空对象或空属性访问。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ed956968c7c53b0d3cc94