Fusionner des objets dans Javasript

1. Utilisez la fonction object.assign() pour fusionner des objets en JavaScript
2. Utiliser l’opérateur Spread pour fusionner des objets en JavaScript
3. Utilisez la fonction array.reduce() pour fusionner des objets en JavaScript
4. Utilisez la fonction jquery.extend() pour fusionner des objets en JavaScript
5. Utiliser une fonction définie par l’utilisateur pour fusionner des objets en JavaScript

Un objet est un type de données non primitif qui nous permet de stocker des données dans des paires clé-valeur.

Dans ce tutoriel, nous allons fusionner deux objets ou plus en JavaScript en utilisant différentes méthodes.

Utilisez la fonction object.assign() pour fusionner des objets en JavaScript

En JavaScript, la méthode assign() peut lire de manière itérative les propriétés d’un ou plusieurs objets vers un objet cible. Il renvoie l’objet cible. On peut passer les deux objets avec un objet vide pour les fusionner.

Vérifiez le code ci-dessous.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

var obj3 = Object.assign({}, obj1, obj2);
console.log(obj3);

Production:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Utiliser l’opérateur Spread pour fusionner des objets en JavaScript

En JavaScript, l’opérateur spread (…) peut décompresser tous les éléments d’un tableau. Nous pouvons également l’utiliser pour fusionner des objets.

Consultez le code suivant pour savoir comment utiliser cette méthode.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

var obj3 = {...obj1, ...obj2};
console.log(obj3);

Production:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Utilisez la fonction array.reduce() pour fusionner des objets en JavaScript

Pour cela, nous avons utilisé la fonction array.reduce(), qui permet d’implémenter une fonction de réduction (que vous fournissez) sur chaque élément d’un tableau. Il renvoie une seule valeur de sortie.

Nous l’implémentons dans l’extrait de code suivant.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

function merge(...arr) {
  return arr.reduce((acc, val) => {
    return {...acc, ...val};
  }, {});
}

var obj3 = merge(obj1, obj2);
console.log(obj3);

Production:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Utilisez la fonction jquery.extend() pour fusionner des objets en JavaScript

jQuery est une bibliothèque de JavaScript légère et très rapide. Il simplifie l’utilisation de JavaScript.

Le extend() est une méthode jQuery utilisée pour fusionner deux ou plusieurs objets en un seul objet. Il renvoie un objet.
Par example,

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};

var obj2 = {
  store: 'Walmart',
};

jQuery.extend(obj1, obj2);

Production:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Utiliser une fonction définie par l’utilisateur pour fusionner des objets en JavaScript

En cela, nous créons notre propre fonction pour renvoyer un objet fusionné. Il utilise les propriétés des deux objets sont fusionnés en un troisième objet.

Vérifiez le code ci-dessous.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};

var obj2 = {
  store: 'Walmart',
};

function merge_options(obj1, obj2) {
  var obj3 = {};
  for (var key in obj1) {
    obj3[key] = obj1[key];
  }
  for (var key in obj2) {
    obj3[key] = obj2[key];
  }
  return obj3;
};

merge_options(obj1, obj2);

Production:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}