LabEx
EntrerRejoindre

Fusionner des objets JavaScript avec Reduce et Concat

Beginner

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

Introduction

Dans ce laboratoire, nous allons explorer le processus de fusion d'objets en JavaScript. Le laboratoire vous guidera tout au long des étapes de création d'un nouvel objet en combinant deux ou plusieurs objets. Vous allez apprendre à utiliser Array.prototype.reduce() et Object.keys() pour itérer sur des objets et des clés, et Object.prototype.hasOwnProperty() et Array.prototype.concat() pour fusionner les valeurs pour les clés existantes.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Fonction de fusion d'objets

Pour fusionner deux ou plusieurs objets, suivez les étapes suivantes :

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à coder.
  2. Utilisez Array.prototype.reduce() avec Object.keys() pour itérer sur tous les objets et les clés.
  3. Utilisez Object.prototype.hasOwnProperty() et Array.prototype.concat() pour ajouter les valeurs pour les clés existant dans plusieurs objets.
  4. Utilisez le extrait de code donné pour créer un nouvel objet à partir de la combinaison de deux ou plusieurs objets.
const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k)
          ? [].concat(acc[k]).concat(obj[k])
          : obj[k];
        return acc;
      }, {}),
    {}
  );

Par exemple, considérez les objets suivants :

const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: "foo"
};

Lorsque vous fusionnez ces deux objets à l'aide de la fonction merge(), vous obtenez le résultat suivant :

merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

Résumé

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