Deep Map Object Keys

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 comment utiliser la fonction deepMapKeys en JavaScript pour mapper de manière récursive les clés d'un objet. Nous apprendrons à créer un nouvel objet avec les mêmes valeurs et les clés mappées en utilisant une fonction fournie pour chaque clé. Grâce à des exercices pratiques et des exemples, nous comprendrons comment cette fonction fonctionne et comment elle peut être utilisée dans des scénarios pratiques.


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") subgraph Lab Skills javascript/variables -.-> lab-28265{{"Deep Map Object Keys"}} javascript/data_types -.-> lab-28265{{"Deep Map Object Keys"}} javascript/arith_ops -.-> lab-28265{{"Deep Map Object Keys"}} javascript/comp_ops -.-> lab-28265{{"Deep Map Object Keys"}} javascript/array_methods -.-> lab-28265{{"Deep Map Object Keys"}} javascript/higher_funcs -.-> lab-28265{{"Deep Map Object Keys"}} end

Deep Map Object Keys

Pour mapper de manière récursive les clés d'un objet, suivez ces étapes :

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
  2. Utilisez la fonction deepMapKeys avec l'objet fourni et une fonction qui génère de nouvelles clés.
  3. La fonction crée un objet avec les mêmes valeurs que l'objet fourni et des clés générées en exécutant la fonction fournie pour chaque clé.
  4. Itérez sur les clés de l'objet à l'aide de Object.keys().
  5. Créez un nouvel objet avec les mêmes valeurs et les clés mappées à l'aide de Array.prototype.reduce() et de la fonction fournie.
  6. Si une valeur est un objet, appelez deepMapKeys de manière récursive sur elle pour mapper également ses clés.
const deepMapKeys = (obj, fn) =>
  Array.isArray(obj)
    ? obj.map((val) => deepMapKeys(val, fn))
    : typeof obj === "object"
      ? Object.keys(obj).reduce((acc, current) => {
          const key = fn(current);
          const val = obj[current];
          acc[key] =
            val !== null && typeof val === "object"
              ? deepMapKeys(val, fn)
              : val;
          return acc;
        }, {})
      : obj;

Voici un exemple d'utilisation de deepMapKeys :

const obj = {
  foo: "1",
  nested: {
    child: {
      withArray: [
        {
          grandChild: ["hello"]
        }
      ]
    }
  }
};

const upperKeysObj = deepMapKeys(obj, (key) => key.toUpperCase());
/*
{
  "FOO":"1",
  "NESTED":{
    "CHILD":{
      "WITHARRAY":[
        {
          "GRANDCHILD":[ 'hello' ]
        }
      ]
    }
  }
}
*/

Summary

Félicitations! Vous avez terminé le laboratoire Deep Map Object Keys. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.