如何检查深度嵌套的 props

Question

I often find myself having to build long chains before mapping over an array to check if it's defined:

this.props.photos &&
this.props.photos.activePhotos &&
this.props.photos.activePhotos.map(...

If I leave out the this.props.photos && and this.props.photos.activePhotos.length && my entire application will crash if photos or activePhotos is undefined.

Is there a way to check for these props without having to check every parent object/array of my end item?

Answer 1

January 2020 Update

According to the TC39 proposal , optional chaining will be available shortly within the JavaScript standard (currently in stage 4 ).

The syntax will be the following :

const active = this.props?.photos?.activePhotos

Or the following in your case :

(this.props?.photos?.activePhotos || []).map(...

While this is being implemented, you may want to take a look at Typescript or js compilers to try out the latest ES features

---

Old answer

An alternative could be to use a default value for your props when deconstructing them :

  const { photos = {} } = this.props
  const { activePhotos = [] } = photos
  activePhotos.map(/*   */)

In this case, if photos is not defined, it will be replaced with an empty object. Trying to get the activePhotos out of it will give you an empty array, allowing you to map on it in any case.

Answer 2

I guess you refer to optional chaining, which is stage 1 of TC39

https://github.com/tc39/proposal-optional-chaining

EDIT: The proposal is now in stage 4 (as of January 2020) and will be added into the JavaScript standard

Answer 3

I'm seeing two possible approaches, according to the level of nesting.

#1. If you have many nested props levels:

You can use lodash.get .

Here's how to render activePhotos , only if they exists:

// Please note how do we pass default `[]` as third parameter
// in order to not break the `.map` function
_.get(this.props, 'photos.activePhotos', []).map(...)

---

If you only want to check for deeply nested pros, then you can use lodash.has method:

// Will return `true` / `false`
_.has(this.props, 'photos.activePhotos')

---

#2. If the level of nesting is no more of 2-3 levels:

Just use the native ES6 destructuring assignment + default value feature.

const { photos = {} } = this.props
const { activePhotos = [] } = photos

// Now you can safely map over the `activePhotos`
activePhotos.map(...)

Answer 4

Is there a way to check for these props without having to check every parent object/array of my end item?

In general, no.

It is not clear why the .length of the potential is checked at the code at the question.

If the goal is to reduce the code length you can us JSON.stringify() and RegExp

if (/"activePhotos":\[.*\]/.test(JSON.stringify(this.props))) // do stuff

or if the preferred approach is using AND operator

/"activePhotos":\[.*\]/.test(JSON.stringify(this.props)) && // do stuff

Answer 5

undefsafe is a good enough library to use. There are lot of other libraries available as well.

Simple example of how to use it

var object = {
  a: {
    b: {
      c: 1,
      d: [1,2,3],
      e: 'remy'
    }
  }
};

console.log(undefsafe(object, 'a.b.e')); // "remy"
console.log(undefsafe(object, 'a.b.not.found')); // undefined

Answer 6

Here is a functional approach to optional chaining with default value return. The method uses a Maybe monad and a Proxy .

A wrap() function is used to wrap objects on which you can access any property safely. Internally, wrap creates a Proxy around your object and manages missing values using a Maybe wrapper. At the end of the chain, you unwrap the value by chaining getOrElse(default) with a default value which is returned when the propertie access fails:

 class Maybe { constructor(value) { this.__value = value; } static of(value){ if (value instanceof Maybe) return value; return new Maybe(value); } getOrElse(elseVal) { return this.isNothing() ? elseVal : this.__value; } isNothing() { return this.__value === null || this.__value === undefined; } map(fn) { return this.isNothing() ? Maybe.of(null) : Maybe.of(fn(this.__value)); } } function wrap(obj) { function fix(object, property) { const value = object[property]; return typeof value === 'function' ? value.bind(object) : value; } return new Proxy(Maybe.of(obj), { get: function(target, property) { if (property in target) { return fix(target, property); } else { return wrap(target.map(val => fix(val, property))); } } }); } const obj = { a: 1, b: { c: [4, 1, 2] }, c: () => 'yes' }; console.log(wrap(obj).a.getOrElse(null)) // returns 1 console.log(wrap(obj).abcdefgetOrElse(null)) // returns null console.log(wrap(obj).bcgetOrElse([])) // returns [4, 1, 2] console.log(wrap(obj).bc[0].getOrElse(null)) // returns 4 console.log(wrap(obj).bc[100].getOrElse(-1)) // out-of-bounds index: returns -1 console.log(wrap(obj).c.getOrElse(() => 'no')()) // returns 'yes' console.log(wrap(obj).d.getOrElse(() => 'no')()) // returns 'no'

See this blog post and this link for more information on Maybe monads and the use of proxies.