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

Question

例如，在 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() }

或类似的东西？

谢谢。

Answer 1

目前，可选链是一个 stage 3 draft ，因此，您将来 可能能够做到这一点。

编辑: Optional chaining现在将成为 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(); 
}