Fusionner des objets JavaScript avec Reduce et Concat

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.

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.