Parcours des objets

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, nous allons explorer le concept de création d'une fonction génératrice qui parcours toutes les clés d'un objet donné en utilisant la récursivité. Le but de ce laboratoire est de fournir une expérience pratique aux apprenants pour qu'ils comprennent comment utiliser les expressions yield et yield* en combinaison avec les boucles for...of et Object.keys() pour itérer sur les clés et les valeurs d'un objet. À la fin de ce laboratoire, les apprenants auront une compréhension pratique de la manière de parcourir récursivement un objet et de générer un tableau de clés représentant le chemin actuel et les valeurs correspondantes.


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/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28693{{"Parcours des objets"}} javascript/data_types -.-> lab-28693{{"Parcours des objets"}} javascript/arith_ops -.-> lab-28693{{"Parcours des objets"}} javascript/comp_ops -.-> lab-28693{{"Parcours des objets"}} javascript/cond_stmts -.-> lab-28693{{"Parcours des objets"}} javascript/loops -.-> lab-28693{{"Parcours des objets"}} javascript/array_methods -.-> lab-28693{{"Parcours des objets"}} javascript/spread_rest -.-> lab-28693{{"Parcours des objets"}} end

Parcours des clés d'un objet

Pour générer une liste de toutes les clés d'un objet donné, utilisez les étapes suivantes :

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.

  2. Définissez une fonction génératrice appelée walk qui prend un objet et un tableau de clés. Utilisez la récursivité pour parcourir toutes les clés de l'objet.

  3. À l'intérieur de la fonction walk, utilisez une boucle for...of et Object.keys() pour itérer sur les clés de l'objet.

  4. Utilisez typeof pour vérifier si chaque valeur dans l'objet donné est elle-même un objet. Si la valeur est un objet, utilisez l'expression yield* pour déléguer de manière récursive à la même fonction génératrice, walk, en ajoutant la clé actuelle au tableau de clés.

  5. Sinon, yield un tableau de clés représentant le chemin actuel et la valeur de la clé donnée.

  6. Utilisez l'expression yield* pour déléguer à la fonction génératrice walk.

Voici le code :

const walkThrough = function* (obj) {
  const walk = function* (x, previous = []) {
    for (let key of Object.keys(x)) {
      if (typeof x[key] === "object") yield* walk(x[key], [...previous, key]);
      else yield [[...previous, key], x[key]];
    }
  };
  yield* walk(obj);
};

Pour tester le code, créez un objet et utilisez la fonction walkThrough pour générer une liste de toutes ses clés :

const obj = {
  a: 10,
  b: 20,
  c: {
    d: 10,
    e: 20,
    f: [30, 40]
  },
  g: [
    {
      h: 10,
      i: 20
    },
    {
      j: 30
    },
    40
  ]
};
[...walkThrough(obj)];
/*
[
  [['a'], 10],
  [['b'], 20],
  [['c', 'd'], 10],
  [['c', 'e'], 20],
  [['c', 'f', '0'], 30],
  [['c', 'f', '1'], 40],
  [['g', '0', 'h'], 10],
  [['g', '0', 'i'], 20],
  [['g', '1', 'j'], 30],
  [['g', '2'], 40]
]
*/

Sommaire

Félicitations ! Vous avez terminé le laboratoire Parcours des objets. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.