Maison > interface Web > js tutoriel > le corps du texte

Récupérer et vérifier les chemins dans un objet imbriqué - fonctions util #2

Linda Hamilton
Libérer: 2024-11-19 21:19:03
original
939 Les gens l'ont consulté

Get and verify paths in a nested object - util functions #2

Hier, j'ai partagé avec vous une fonction utilitaire pour boucler de manière récurrente un objet en JS, l'une de ses fonctionnalités est que vous pouvez obtenir un tableau avec un chemin vers l'objet imbriqué qui est actuellement en boucle. Cependant, lorsque vous travaillez avec des objets imbriqués, vous souhaiterez peut-être récupérer ou vérifier les données d'un chemin spécifique à un moment donné, c'est ce que font les fonctions utilitaires actuelles.

  • getDataFromObj(obj, path) : récupérer les données d'un chemin donné dans un objet
  • isValidObjPath(obj, path): vérifier si un chemin donné existe dans un objet

getDataFromObj(obj, chemin)

N'hésitez pas à copier et coller ce code

/**
 * Retrieves data from an object on a given path
 * @param {Object} obj the object to get the data from
 * @param {string[]} path an array of strings containing the keys of the object to look at
 * @returns {*} the retrieved data or a Reference Error if not found
 */

function getDataFromObj(obj, path){
  // Validate arguments
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object");
  }
  if(getType(path) != "array"){
    throw TypeError("The `path` argument is not an array");
  }

  // Get the data or a ReferenceError if not found
  const data = (()=>{
    let currentData = obj;

    for(let i = 0; i < path.length; i +=1 ){
      if(Object.keys(currentData).includes(path[i])){
        currentData = currentData[path[i]];
        continue;
      } else{
        currentData = ReferenceError("The object path is not defined");
        break;
      }
    }
    return currentData;
  })();

  return data;
}

/**
 * A method to detect data types more accurately
 * Credits: Chris Ferdinandi, https://gomakethings.com/
 * @param {*} data the data to be verified
 * @returns {String} the data type
 */
function getType(data){
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1)
}

/**
 * License: MIT, https://opensource.org/license/mit
 * Copyright (c) 2024 Rodrigo Isaias Calix
 */
Copier après la connexion

Usage:

Vous devez passer 2 arguments :
obj : L'objet à partir duquel vous souhaitez récupérer les données
chemin : Un tableau indiquant la séquence à suivre

Si le chemin existe, il renverra la valeur (même si la valeur n'est pas définie), si le chemin n'existe pas, il renverra un objet ReferenceError, il ne renvoie pas d'erreur, renvoie simplement l'objet d'erreur.

const products = {
  computers: {
    laptop: 20,
    desktop: 15,
    mini: 8
  },
  cameras: 20,
  externalDevices: {
    keyboard: {
      usb: 45,
      bluetooth: 25,
      other: undefined
    }
  }
}

// This would log 25
console.log(getDataFromObj(products, ["externalDevices", "keyboard", "bluetooth"]))

// this would return a ReferenceError object (not a throw, just the error object)
console.log(getDataFromObj(products, ["externalDevices", "mouse"]))

// this would return `undefined`
console.log(getDataFromObj(products, ["externalDevices", "keyboard", "other"]))
Copier après la connexion

isValidObjPath(obj, chemin)

Le code utilitaire :

/**
 * verify if an object has an specific path
 * @param {Object} obj the object to be verified
 * @param {string[]} path an array of strings containing the keys of the object to look at
 * @returns {Boolean} `true` if found, otherwise `false`
 */
function isValidObjPath(obj, path){
  // Validate arguments
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object");
  }
  if(getType(path) != "array"){
      throw TypeError("The `path` argument is not an array");
  }

  // shallow copy of the object to be verified
  let currentData = obj;

  // Verify the path
  for(let i = 0; i < path.length; i +=1 ){
    if(Object.keys(currentData).includes(path[i])){
      currentData = currentData[path[i]];
      continue;
    } else{
      return false;
    }
  }

  return true;
}

/**
 * A method to detect data types more accurately
 * Credits: Chris Ferdinandi, https://gomakethings.com/
 * @param {*} data the data to be verified
 * @returns {String} the data type
 */
function getType(data){
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1)
}

/**
 * License: MIT, https://opensource.org/license/mit
 * Copyright (c) 2024 Rodrigo Isaias Calix
 */
Copier après la connexion

Usage:

Vous devez passer 2 arguments :
obj : L'objet dont vous souhaitez vérifier si un chemin existe
chemin : Un tableau indiquant la séquence à suivre

Si le chemin que vous recherchez existe, il renverra vrai, sinon il renverra faux

const products = {
  computers: {
    laptop: 20,
    desktop: 15,
    mini: 8
  },
  cameras: 20,
  externalDevices: {
    keyboard: {
      usb: 45,
      bluetooth: 25,
      other: undefined
    }
  }
}

// This would log true
console.log(isValidObjPath(products, ["externalDevices", "keyboard", "bluetooth"]))

// this would log false
console.log(isValidObjPath(products, ["externalDevices", "mouse"]))

// this would log true
console.log(isValidObjPath(products, ["externalDevices", "keyboard", "other"]))
Copier après la connexion

Pourquoi un tableau comme chemin au lieu d'une chaîne avec des barres obliques ou des points ? (par exemple "ordinateurs.ordinateur portable")

Parce que les noms de propriétés d'objet peuvent également être une chaîne avec un large ensemble de caractères, qui inclut des points, ainsi, par exemple, "computers.laptop": {[...]} serait un objet valide, un tableau permettrait plus de flexibilité et de précision.


Si vous avez trouvé cela utile, je partagerai plus de contenu comme celui-ci sur DEV !

Vous pouvez également me retrouver sur X : https://x.com/schemetastic

Et pensez à le sauvegarder pour plus tard ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal