如何在 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

目前，可选链接是第 3 阶段草稿，因此，您将来可以这样做。

编辑：可选链接现在将成为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(); 
}

Answer 2

如果你不能使用可选的链接，这仍然是一个建议，但可以通过 babel 插件获得，你可以使用递归实用程序函数来测试每个路径段的存在：

const pluck = (item, path) => {
const [, part, rest] = /^([^.]+).*(.*)/.exec(path) || [];
if (!part) {
return null;
}
const o = (item || {})[part];
if (o == null) {
return null;
}
return rest.length ? pluck(o, rest) : o;
};
if (pluck(this.state, ‘user.company.pic.phoneNumber’)) {
doSomething();
}