How to check for availability for a nested variable without checking all the preceding variable availability, in ReactNative?

问题

For example, in iOS Swift, I can do something like this:

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

Without the need to:

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

In ReactNative (or Javascript), I found out that if an object is undefined, I can't check for the existence of the variable inside of it, so I have to check first whether the object is undefined or not, only then I can safely check whether the variable inside of it undefined or not.

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() }

How can I turn this into just:

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

or something similar?

Thanks.

回答1:

~~Currently, optional chaining is a stage 3 draft, and so, you may be able to do it in the future.~~

EDIT: Optional chaining will now be part of ES2020, and so you'll be able to do the following:

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

With that being said, it still has very limited browser support.

So, for the time being, you could instead create a function which recursively finds each object from a list of properties like so:

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

In your case, the usage would be as so:

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

回答2:

If you can’t use optional chaining which is still a proposal but available via babel plugin you could use a recursive utility function to test for the presence of each path segment:

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();
}

来源：https://stackoverflow.com/questions/58297020/how-to-check-for-availability-for-a-nested-variable-without-checking-all-the-pre

标签

javascript

react-native

optional