可选链式编程即将登陆 JavaScript

更新：可选链式调用终于进入了第 4 阶段！这意味着它是 ES2020 规范的一部分。它也已经进入了TypeScript v3.7 版本。

这是包含您需要的所有信息的 repo。

它是什么？

可选链式调用允许我们在尝试访问对象的属性之前检查其是否存在。其他一些语言也提供类似的功能。例如，C# 就有一个空条件运算符，其行为与建议的可选链式调用非常相似。

我们为什么需要它？

你是否曾经在访问对象或数组的属性之前检查过它是否存在？如果你忘了，代码可能看起来像这样：

if(specimen && specimen.arms && specimen.arms.length > 2)
    console.log("This is probably an alien");

我们进行这些检查的原因是，JavaScript 允许匿名对象，这些对象不一定具有结构或模式。因此，如果我们不检查对象树中的父对象，就会出现很多类似这样的错误：

因为，至少在错误的情况下，specimen确实存在，但它没有arms属性。因此，我们尝试length获取undefined。

那么，提议是什么？

除了这些，我们还可以像这样链接可选检查：

if(specimen?.arms?.length > 2)
    console.log("This is probably an alien");

但是，请记住可选链接运算符?.不是?- 这意味着当使用它来访问数组中的项目时，它将看起来像这样：

var firstArm = specimen?.arms?.[0]; //CORRECT
var secondArm = specimen?.arms?[1]; //WRONG

类似地，当使用它来检查函数是否存在时：

var kickPromise = specimen?.kick?.();  //CORRECT
var punchPromise = specimen?.punch?(); //WRONG

在这种情况下，我们kick在将其作为函数调用之前检查是否存在！

它是如何工作的？

运算符检查左侧的是否为?.或null。undefined如果是，则表达式短路并返回undefined。否则，表达式将继续求值，如同一切正常一样。

我什么时候可以使用它？

嗯，它目前还只是一个提案，所以还不能在 Vanilla JavaScript 中使用。不过，它可以在 Babel 中使用！

为了及时了解该提案的最新进展，以及更深入地理解并查看一些示例，你应该查看他们的 GitHub 仓库！你也可以在这里找到规范，但我不会深入讨论，因为该文档的大部分内容我都无法理解 😅

谢谢你！

别客气！❤️