Mapper un objet en un tableau

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 apprendre à mapper un objet à un tableau d'objets à l'aide de la fonction listify() en JavaScript. La fonction utilise Object.entries() et Array.prototype.reduce() pour mapper l'objet et mapFn pour mapper les clés et les valeurs de l'objet. À la fin de ce laboratoire, vous serez capable de mapper efficacement des objets à des tableaux à l'aide de JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic 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/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28472{{"Mapper un objet en un tableau"}} javascript/data_types -.-> lab-28472{{"Mapper un objet en un tableau"}} javascript/arith_ops -.-> lab-28472{{"Mapper un objet en un tableau"}} javascript/comp_ops -.-> lab-28472{{"Mapper un objet en un tableau"}} javascript/higher_funcs -.-> lab-28472{{"Mapper un objet en un tableau"}} javascript/destr_assign -.-> lab-28472{{"Mapper un objet en un tableau"}} javascript/spread_rest -.-> lab-28472{{"Mapper un objet en un tableau"}} end

Comment mapper un objet en un tableau en JavaScript

Pour mapper un objet en un tableau en JavaScript, vous pouvez utiliser la fonction listify(). Voici comment faire :

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

  2. Utilisez Object.entries() pour obtenir un tableau des paires clé-valeur de l'objet.

  3. Utilisez Array.prototype.reduce() pour mapper le tableau en un objet.

  4. Utilisez mapFn pour mapper les clés et les valeurs de l'objet et Array.prototype.push() pour ajouter les valeurs mappées au tableau.

Voici le code de la fonction listify() :

const listify = (obj, mapFn) =>
  Object.entries(obj).reduce((acc, [key, value]) => {
    acc.push(mapFn(key, value));
    return acc;
  }, []);

Et voici un exemple de manière à l'utiliser avec un objet appelé people :

const people = { John: { age: 42 }, Adam: { age: 39 } };
listify(people, (key, value) => ({ name: key, ...value }));
// [ { name: 'John', age: 42 }, { name: 'Adam', age: 39 } ]

Avec cette fonction, vous pouvez facilement mapper un objet en un tableau en JavaScript.

Résumé

Félicitations ! Vous avez terminé le laboratoire Map an Object to an Array. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.