javascript可选的链式调用可能到来了

1,367 阅读2分钟
原文链接: www.fragmentwall.com

可选的链式调用目前在第1阶段,您需要的所有信息在这个仓库里。

它是什么?

可选的链式调用允许我们检查对象是否存在,然后尝试访问它的属性。其他一些语言也有相似之处。例如,c#有一个空条件操作符,它的行为非常类似于所提议的可选的链式调用。

我们为什么需要它?

您是否曾经在访问其属性之前检查过对象或数组的存在?如果你忘了,我帮你回忆一下像下面这样:

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

我们做这些检查的原因是因为在javascript中允许匿名对象它不一定具有我们访问的结构,因此,如果我们不检查对象树中的父项,我们可能会有很多像这样的错误:

error.png

因为,起码在这个错误中specimen确实存在,但它没有arms属性,因此,我们试图得到undefinedlength

所以,有更好的方式吗?

我们可以使用可选的链式调用,像下面这样:

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

这里请记住哈可选的链式调用使用的是?.而不是?,这意味着当使用它访问数组中的项时它看起来像这样:

var firstArm = specimen?.arms?.[0]; // 正确
var secondArm = specimen?.arms?[1]; // 错误

同样,当使用它来检查函数的存在时:

var kickPromise = specimen?.kick?.();  // 正确
var punchPromise = specimen?.punch?(); // 错误

在这种情况下,我们在将它作为函数调用之前检查kick是否存在!

它是如何工作的呢?

?.操作符检查左边的是什么,是nullundefined。如果是,则表达式短路返回undefined。否则,表达式就会继续计算,就好像没有任何错误。

什么时候可以使用它?

那么,它目前仍然是一个提议(proposal),所以它现在还不在Vanilla JavaScript中。但是,它可以与Babel一起使用!

为了跟上提案的进度,以及有一个更深入的了解和检查一些例子,如果你喜欢应该查看他们的GitHub repo!

谢谢阅读