简介

最近，我们发现负责ECMAScript语言标准的TC39委员会将可选链表推进到第三阶段，考虑将其纳入标准。这是审议的倒数第二个阶段，所以很多人都对此感到兴奋。今天，我将探讨可选链式和它所解决的问题。

首先，问题

在JavaScript中，如果我们对对象的结构不确定的话，访问对象中的属性会很危险。比方说，我们有一个user 对象，它可能有也可能没有成员信息。如果我们只是假设我们的用户有会员信息，我们就会陷入麻烦。

const user = { name: 'Jen' };
const membershipType = user.membership.type;
// TypeError: Cannot read property 'type' of undefined

有几种方法可以防止这种情况的发生。我们可以明确地检查membership 属性是否存在。

let membershipType = undefined;
if (user.membership) {
  membershipType = user.membership.type;
}

或者我们可以使用一个短路操作符来测试user.membership 是否存在。

const membershipType = user.membership && user.membership.type;

我更喜欢后一种方法，但想象一下，当你需要向下钻取几层时，这看起来如何。

const membershipTypeName =
  user.membership && user.membership.type && user.membership.type.name;

这就开始变得很不靠谱了。

那么，什么是可选链式？

可选链式基本上是后一种方法的简称。让我们用建议的可选链式方法重写最后一个片段。

const membershipTypeName = user?.membership?.type?.name;

在这种情况下，我们让JavaScript知道，我们不太确定user 上是否有一个membership 属性，membership 上是否有一个type 属性，或者type 上是否有一个name 属性。如果这些检查中有任何一项是不真实的，我们的membershipTypeName 变量将最终变成undefined ，而不是抛出一个错误。