Method example of safely getting deep objects of Object in Js

Preface
text

parameter
example
Lodash implementation:
tokey function:
castPath function:
stringToPath function:
memoizeCapped function:
memoize function:
The complete code is as follows:

References:

Summarize

Preface

Friends who work on the front end must have encountered situations where the data returned by the back end is nested in multiple layers. When I want to get the value of a deep object, I will do layer-by-layer non-empty checks to prevent errors, such as:

const obj = {
    goods:
        name: 'a',
     tags: {
            name: 'Fast',
         id: 1,
         tagType: {
                name: 'Label'
           }
       }
   }
}

When I need to get tagType.name, the judgment is like this

if (obj.goods !== null
    && obj.goods.tags !== null
    && obj.goods.tags.tagType !== null) {
 
 }

If the attribute name is long, the code will be unreadable.

Of course, ECMAScript 2020 has introduced ?. to solve this problem:

let name = obj?.goods?.tags?.tageType?.name;

But how to deal with browsers that are not compatible with ES2020?

text

Students who have used lodash may know that there is a get method in lodash. The official website says:

_.get(object, path, [defaultValue])

Get the value according to the path of the object. If the resolved value is undefined it will be replaced by defaultValue.

parameter

object (Object) : The object to be retrieved.
path (Array|string) : The path to get the properties from.
[defaultValue] ()* : If the resolved value is undefined, this value will be returned.

example

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3 

_.get(object, ['a', '0', 'b', 'c']);
// => 3

_.get(object, 'abc', 'default');
// => 'default'

This solves the problem, but (I’m afraid there’s a “but”)

What if I cannot use the lodash library due to various reasons such as project or company requirements?

Now, let's see how lodash is implemented. Can't we just extract the code? Then we can happily move bricks again~~

Lodash implementation:

function get(object, path, defaultValue) {
  const result = object == null ? undefined : baseGet(object, path)
  return result === undefined ? defaultValue : result
}

What we do here is very simple. Let's look at the return first. If the object returns the default value, the core code is in baseGet, so let's look at the implementation of baseGet

function baseGet(object, path) {
  //Convert the input string path into an array,
  path = castPath(path, object)

  let index = 0
  const length = path.length
  // Traverse the array to get each layer of objects while (object != null && index < length) {
    object = object[toKey(path[index++])] // toKey method}
  return (index && index == length) ? object : undefined
}

Here we use two functions: castPath (convert the input path to an array) and toKey (convert the real key)

tokey function:

/** Used as references for various `Number` constants. */
const INFINITY = 1 / 0

/**
 * Converts `value` to a string key if it's not a string or symbol.
 *
 * @private
 * @param {*} value The value to inspect.
 * @returns {string|symbol} Returns the key.
 */
function toKey(value) {
  if (typeof value === 'string' || isSymbol(value)) {
    return value
  }
  const result = `${value}`
  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result
}

There are two main things done here.

If the key type is String or symbol, it will be returned directly.
If the key is of other types, it is converted to String and returned

The isSymbol function is also used here to determine whether it is a Symbol type. The code is not posted here. Students who are interested can check the lodash source code

castPath function:

import isKey from './isKey.js'
import stringToPath from './stringToPath.js'

/**
 * Casts `value` to a path array if it's not one.
 *
 * @private
 * @param {*} value The value to inspect.
 * @param {Object} [object] The object to query keys on.
 * @returns {Array} Returns the cast property path array.
 */
function castPath(value, object) {
  if (Array.isArray(value)) {
    return value
  }
  return isKey(value, object) ? [value] : stringToPath(value)
}

castPath mainly converts the input path into an array to prepare for the subsequent traversal to obtain deep objects.

isKey() and stringToPath() are used here.

isKey is a relatively simple function to determine whether the current value is the key of an object.

stringToPath mainly handles the case where the input path is a string, such as: 'abc[0].d'

stringToPath function:

import memoizeCapped from './memoizeCapped.js'

const charCodeOfDot = '.'.charCodeAt(0)
const reEscapeChar = /\(\)?/g
const rePropName = RegExp(
  // Match anything that isn't a dot or bracket.
  '[^.[\]]+' + '|' +
  // Or match property names within brackets.
  '\[(?:' +
    // Match a non-string expression.
    '([^"'][^[]*)' + '|' +
    // Or match strings (supports escaping characters).
    '(["'])((?:(?!\2)[^\\]|\\.)*?)\2' +
  ')\]'+ '|' +
  // Or match "" as the space between consecutive dots or empty brackets.
  '(?=(?:\.|\[\])(?:\.|\[\]|$))'
  , 'g')

/**
 * Converts `string` to a property path array.
 *
 * @private
 * @param {string} string The string to convert.
 * @returns {Array} Returns the property path array.
 */
const stringToPath = memoizeCapped((string) => {
  const result = []
  if (string.charCodeAt(0) === charCodeOfDot) {
    result.push('')
  }
  string.replace(rePropName, (match, expression, quote, subString) => {
    let key = match
    if (quote) {
      key = subString.replace(reEscapeChar, '$1')
   }
    else if (expression) {
      key = expression.trim()
   }
    result.push(key)
  })
  return result
})

Here we mainly exclude the . and [] in the path, parse the real key and add it to the array

memoizeCapped function:

import memoize from '../memoize.js'

/** Used as the maximum memoize cache size. */
const MAX_MEMOIZE_SIZE = 500

/**
 * A specialized version of `memoize` which clears the memoized function's
 * cache when it exceeds `MAX_MEMOIZE_SIZE`.
 *
 * @private
 * @param {Function} func The function to have its output memoized.
 * @returns {Function} Returns the new memoized function.
 */
function memoizeCapped(func) {
  const result = memoize(func, (key) => {
    const { cache } = result
    if (cache.size === MAX_MEMOIZE_SIZE) {
      cache.clear()
   }
    return key
  })

  return result
}

export default memoizeCapped

Here is a limit on the cached key, clearing the cache when it reaches 500

memoize function:

function memoize(func, resolver) {
  if (typeof func !== 'function' || (resolver != null && typeof resolver !== 'function')) {
    throw new TypeError('Expected a function')
  }
  const memoized = function(...args) {
    const key = resolver ? resolver.apply(this, args) : args[0]
    const cache = memoized.cache

    if (cache.has(key)) {
      return cache.get(key)
   }
    const result = func.apply(this, args)
    memoized.cache = cache.set(key, result) || cache
    return result
  }
  memoized.cache = new (memoize.Cache || Map)
  return memoized
}

memoize.Cache = Map

Actually, I don't quite understand the last two functions. If the input path is 'abc', can't we just convert it into an array? Why use closures for caching?

I hope someone who understands this can give me an answer.

Since the source code uses many functions and is in different files, I have simplified them.

The complete code is as follows:

/**
   * Gets the value at `path` of `object`. If the resolved value is
   * `undefined`, the `defaultValue` is returned in its place.
   * @example
   * const object = { 'a': [{ 'b': { 'c': 3 } }] }
   *
   * get(object, 'a[0].b.c')
   * // => 3
   *
   * get(object, ['a', '0', 'b', 'c'])
   * // => 3
   *
   * get(object, 'abc', 'default')
   * // => 'default'
   */
  safeGet (object, path, defaultValue) {
    let result
    if (object != null) {
      if (!Array.isArray(path)) {
        const type = typeof path
        if (type === 'number' || type === 'boolean' || path == null ||
        /^\w*$/.test(path) || !(/.|[(?:[^[]]*|(["'])(?:(?!\1)[^\]|\.)*?\1)]/.test(path)) ||
       (object != null && path in Object(object))) {
          path = [path]
       } else {
          const result = []
          if (path.charCodeAt(0) === '.'.charCodeAt(0)) {
            result.push('')
         }
          const rePropName = RegExp(
            // Match anything that isn't a dot or bracket.
            '[^.[\]]+|\[(?:([^"'][^[]*)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))'
           , 'g')
          path.replace(rePropName, (match, expression, quote, subString) => {
            let key = match
            if (quote) {
              key = subString.replace(/\(\)?/g, '$1')
           } else if (expression) {
              key = expression.trim()
           }
            result.push(key)
         })
          path = result
       }
     }
      let index = 0
      const length = path.length
      const toKey = (value) => {
        if (typeof value === 'string') {
          return value
       }
        const result = `${value}`
        return (result === '0' && (1 / value) === -(1 / 0)) ? '-0' : result
     }
      while (object != null && index < length) {
        object = object[toKey(path[index++])]
     }
      result = (index && index === length) ? object : undefined
   }
    return result === undefined ? defaultValue : result
  }

The code is borrowed from lodash

References:

lodash official documentation
Github

Summarize

This is the end of this article about safely getting deep-level objects of Object in Js. For more relevant content about getting deep-level objects of Object in Js, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: