Récupérer les propriétés d'objets imbriqués à partir d'une chaîne de caractères représentant un chemin

JavaScriptJavaScriptBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire (lab), nous explorerons comment récupérer les propriétés d'objets imbriqués à l'aide d'une chaîne de caractères représentant un chemin donné en JavaScript. Nous apprendrons à utiliser diverses méthodes de tableau telles que map(), filter() et reduce() pour extraire des valeurs spécifiques d'objets complexes. Cette compétence est essentielle pour travailler avec de grands ensembles de données et des API qui renvoient des objets JSON imbriqués.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28356{{"Récupérer les propriétés d'objets imbriqués à partir d'une chaîne de caractères représentant un chemin"}} javascript/data_types -.-> lab-28356{{"Récupérer les propriétés d'objets imbriqués à partir d'une chaîne de caractères représentant un chemin"}} javascript/arith_ops -.-> lab-28356{{"Récupérer les propriétés d'objets imbriqués à partir d'une chaîne de caractères représentant un chemin"}} javascript/comp_ops -.-> lab-28356{{"Récupérer les propriétés d'objets imbriqués à partir d'une chaîne de caractères représentant un chemin"}} javascript/array_methods -.-> lab-28356{{"Récupérer les propriétés d'objets imbriqués à partir d'une chaîne de caractères représentant un chemin"}} javascript/higher_funcs -.-> lab-28356{{"Récupérer les propriétés d'objets imbriqués à partir d'une chaîne de caractères représentant un chemin"}} javascript/spread_rest -.-> lab-28356{{"Récupérer les propriétés d'objets imbriqués à partir d'une chaîne de caractères représentant un chemin"}} end

Comment récupérer les propriétés d'objets imbriqués à partir de chaînes de caractères représentant des chemins

Pour pratiquer la programmation, ouvrez le Terminal/SSH et tapez node.

La fonction suivante permet de récupérer un ensemble de propriétés à partir d'un objet en utilisant des sélecteurs spécifiés dans une chaîne de caractères représentant un chemin. Pour ce faire, suivez les étapes suivantes :

  1. Utilisez Array.prototype.map() pour parcourir chaque sélecteur, et appliquez String.prototype.replace() pour remplacer les crochets par des points.
  2. Utilisez String.prototype.split() pour diviser chaque sélecteur en un tableau de chaînes de caractères.
  3. Utilisez Array.prototype.filter() pour supprimer toutes les valeurs vides.
  4. Utilisez Array.prototype.reduce() pour récupérer la valeur indiquée par chaque sélecteur.

Voici la fonction :

const get = (from, ...selectors) =>
  [...selectors].map((s) =>
    s
      .replace(/\[([^\[\]]*)\]/g, ".$1.")
      .split(".")
      .filter((t) => t !== "")
      .reduce((prev, cur) => prev && prev[cur], from)
  );

Vous pouvez utiliser cette fonction pour récupérer des valeurs à partir d'un objet imbriqué en utilisant une chaîne de caractères représentant un chemin. Voici un exemple :

const obj = {
  selector: { to: { val: "val to select" } },
  target: [1, 2, { a: "test" }]
};
get(obj, "selector.to.val", "target[0]", "target[2].a");
// ['val to select', 1, 'test']

Résumé

Félicitations! Vous avez terminé le laboratoire (lab) "Get Nested Object Property From Path String". Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.