Combiner des tableaux d'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 travailler sur un exercice de programmation JavaScript visant à combiner deux tableaux d'objets sur la base d'une propriété spécifiée. Le but de cet exercice est de vous aider à pratiquer l'utilisation de la méthode Array.prototype.reduce() et la manipulation d'objets en JavaScript, qui sont des compétences essentielles pour tout développeur utilisant JavaScript. À la fin de ce laboratoire, vous devriez être capable de combiner sans effort deux tableaux d'objets sur la base d'une propriété pour créer un nouveau tableau.


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/array_methods("Array Methods") 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-28201{{"Combiner des tableaux d'objets"}} javascript/data_types -.-> lab-28201{{"Combiner des tableaux d'objets"}} javascript/arith_ops -.-> lab-28201{{"Combiner des tableaux d'objets"}} javascript/comp_ops -.-> lab-28201{{"Combiner des tableaux d'objets"}} javascript/cond_stmts -.-> lab-28201{{"Combiner des tableaux d'objets"}} javascript/array_methods -.-> lab-28201{{"Combiner des tableaux d'objets"}} javascript/higher_funcs -.-> lab-28201{{"Combiner des tableaux d'objets"}} javascript/destr_assign -.-> lab-28201{{"Combiner des tableaux d'objets"}} javascript/spread_rest -.-> lab-28201{{"Combiner des tableaux d'objets"}} end

Fonction pour Combiner des Tableaux d'Objets sur la Base d'une Clé Spécifiée

Pour combiner deux tableaux d'objets sur la base d'une clé spécifique, suivez ces étapes :

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
  2. Utilisez Array.prototype.reduce() avec un accumulateur d'objet pour combiner tous les objets des deux tableaux sur la base de la prop donnée.
  3. Utilisez Object.values() pour convertir l'objet résultant en un tableau et le retourner.

Voici la fonction que vous pouvez utiliser :

const combine = (a, b, prop) =>
  Object.values(
    [...a, ...b].reduce((acc, v) => {
      if (v[prop])
        acc[v[prop]] = acc[v[prop]] ? { ...acc[v[prop]], ...v } : { ...v };
      return acc;
    }, {})
  );

Voici un exemple d'utilisation de cette fonction :

const x = [
  { id: 1, name: "John" },
  { id: 2, name: "Maria" }
];
const y = [{ id: 1, age: 28 }, { id: 3, age: 26 }, { age: 3 }];
combine(x, y, "id");
// [
//  { id: 1, name: 'John', age: 28 },
//  { id: 2, name: 'Maria' },
//  { id: 3, age: 26 }
// ]

Sommaire

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