在 ReactNative 中，如何在不检查所有前面的变量可用性的情况下检查嵌套变量的可用性？

例如，在 iOS Swift 中，我可以这样做：

if (self.user?.company?.pic?.phoneNumber != null) { doSomething() }

无需：

if (self.user != null && self.user!.company != null && self.user!.company!.pic != null && self.user!.company!.pic!.phoneNumber != null) { doSomething() }

在ReactNative（或Javascript）中，我发现如果一个对象未​​定义，我无法检查它内部的变量是否存在，所以我必须首先检查该对象是否未定义，然后我才能安全地检查其中的变量是否未定义。

if (typeof this.state.user !== "undefined" && typeof this.state.user.company !== "undefined" && typeof this.state.user.company.pic !== "undefined" && typeof this.state.user.company.pic.phoneNumber !== undefined) { this.doSomething() }

我怎样才能把它变成：

if (typeof this.state.user.company.pic.phoneNumber !== "undefined") { this.doSomething() }

或者类似的东西？

Thanks.

目前，可选链是第三阶段草案，所以，你may将来能够做到。

EDIT: 可选链接现在将成为 ES2020 的一部分，因此您将能够执行以下操作：

if (self.user?.company?.pic?.phoneNumber !== undefined) { 
  doSomething(); // phoneNumber exists
}

话虽如此，它的浏览器支持仍然非常有限。

因此，暂时您可以创建一个函数，从属性列表中递归查找每个对象，如下所示：

const optional_chain = (obj, [key, ...props]) =>
  obj !== undefined && key ? optional_chain(obj[key], props) : obj;

const user = {
  company: {
    pic: {
      phoneNumber: 1
    }
  }
}

console.log(optional_chain(user, ['company', 'pic', 'phoneNumber'])); // 1
console.log(optional_chain(user, ['company', 'pic', 'phoneNumber', 'x'])); // undefined
console.log(optional_chain(user, ['company', 'picture', 'phoneNumber'])); // undefined
console.log(optional_chain(user, ['x', 'picture', 'phoneNumber'])); // undefined

在你的情况下，用法如下：

if (optional_chain(self.user, ['company', 'pic', 'phoneNumber']) !== undefined) { 
  doSomething(); 
}