Boucler de manière récurrente un objet dans JS - fonction util #1

Actuellement, je travaille sur des projets personnels et j'ai pensé que c'était une bonne idée de partager le code dont j'ai besoin pour mes projets, ainsi que certaines choses que j'apprends en cours de route, je vais donc en partager davantage. de cela bientôt. J'espère que cela vous sera utile aussi ! ?

Aujourd'hui, je partage avec vous une fonction utilitaire pour vous aider à parcourir les objets imbriqués, à chaque itération de l'objet, vous pouvez exécuter un rappel et obtenir des données utiles.

Exemples de cas d'utilisation :

• Filtrer ou trier les données d'un objet
• Pour vous aider à naviguer dans un répertoire trois interfaces utilisateur qui sont représentées dans un objet
• Gérer les options imbriquées dans une interface utilisateur
• Gérer les catégories et sous-catégories
• Parcourir les données lorsqu'elles sont extraites d'une base de données

fonction utilitaire loopObj

Vous pouvez simplement copier et coller ces fonctions

/**
 * Loops an object recurrently
 * @param {Object} obj the object to be looped
 * @param {Function} callback a function that will run on each iteration
 */
function loopObj(obj, callback, path = [], nestLevel = 0){
  // validate params (`path` and `nestLevel` are added automatically)
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object")
  }
  if(getType(callback) != "function"){
    throw TypeError("The `callback` argument is not a function")
  }

  // Loop the object
  for (let key in obj){
    // Run the callback
    callback(key, obj[key], obj, path, nestLevel)
    // Loop a nested object
    if(getType(obj[key]) == "object") loopObj(obj[key], callback, [...path, key], nestLevel + 1)
  }
}

/**
 * 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
 */

Comment l'utiliser :

Exemple d'extrait :

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

// calling the function
loopObj(products, (key, value, obj, path, nestLevel)=>{
  console.log(key, value, path, nestLevel)
});

Cela affichera quelque chose comme ceci :

Lors de l'appel de la fonction loopObj, comme premier argument vous devez passer l'objet que vous souhaitez boucler, et comme second, un rappel. A chaque itération, le rappel transmettra 5 arguments dans cet ordre :

• key (string), la propriété clé actuelle de l'objet
• value (n'importe laquelle), la valeur de cette propriété (par exemple un objet imbriqué ou toute autre valeur qu'il a)
• obj (objet), l'objet en cours de boucle (soit le parent, soit un objet imbriqué)
• path (array), le chemin de l'élément actuel en boucle
• nestLevel (nombre), à ​​partir de 0 (la racine), il vous indique la profondeur du niveau de la boucle actuelle.

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!