Comparer des objets en JavaScript

1. Comparer des objets à l’aide de la fonction JSON.stringify() en JavaScript
2. Comparer des objets manuellement en JavaScript

Ce tutoriel expliquera comment comparer des objets manuellement ou en utilisant la fonction JSON.stringify() en JavaScript.

Comparer des objets à l’aide de la fonction JSON.stringify() en JavaScript

Comparer des variables en JavaScript est relativement simple ; il suffit d’utiliser l’opérateur de comparaison === entre deux variables. Les variables peuvent être de n’importe quel type de données, comme des chaînes et des entiers.

L’opérateur de comparaison renvoie un booléen, qui peut être true ou false selon les variables comparées. Par exemple, comparons deux variables d’un type chaîne à l’aide de l’opérateur de comparaison.

Voir le code ci-dessous.

var a = 'Apple';
var b = 'Apple';
console.log(a === b)

Production:

true

Dans la sortie, le booléen true indique que les deux variables sont identiques. De même, vous pouvez également comparer des nombres. Parlons maintenant de la comparaison d’objets en JavaScript.

La comparaison d’objets n’est pas facile car ils contiennent plusieurs valeurs et peuvent également contenir des objets à l’intérieur. La méthode simple et rapide pour comparer deux objets consiste à utiliser la fonction JASON.stringify(). L’inconvénient de cette méthode est que l’ordre des propriétés est important en comparaison.

Cette fonction compare la première propriété d’un objet avec la première propriété de l’autre objet, et ainsi de suite. Si nous modifions l’ordre des propriétés dans l’un des objets, cette méthode ne fonctionnera pas. Par exemple, comparons deux objets à l’aide de la fonction JSON.strigify().

Voir le code ci-dessous.

const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  name: 'Apple',
  price: '2'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))

Production:

true

Dans ce code, nous comparons deux objets contenant chacun deux propriétés. A partir de la sortie, les deux objets sont égaux. Maintenant, modifions l’ordre des deux propriétés dans un objet, puis comparons-le avec l’autre à l’aide de la fonction JSON.stringify().

Voir le code ci-dessous.

const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  price: '2',
  name: 'Apple'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))

Production:

false

Dans la sortie, le résultat est false. Nous avons changé l’ordre des propriétés du deuxième objet ; c’est l’inconvénient de cette méthode.

Comparer des objets manuellement en JavaScript

La méthode ci-dessus a un inconvénient, nous pouvons donc créer notre propre fonction pour comparer deux objets afin que nous n’ayons pas à nous soucier de l’ordre des propriétés des objets.

Par exemple, créons une fonction pour comparer les objets ci-dessus en JavaScript. Voir le code ci-dessous.

function ObjCompare(obj1, obj2) {
  if (obj1.name === obj2.name && obj1.price === obj2.price) {
    return true;
  };
  return false;
}
const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  price: '2',
  name: 'Apple'
};
console.log(ObjCompare(fruit1, fruit2))

Production:

true

Dans le code ci-dessus, nous avons créé la fonction ObjCompare(), comparant deux objets en fonction de leurs propriétés quel que soit leur ordre. La fonction ne renvoie true que lorsque le nom et le prix des deux objets sont identiques ; sinon, il renverra false.

Vous pouvez également créer votre propre fonction pour comparer plusieurs propriétés ou comparer une propriété que vous souhaitez comparer à partir de toutes les propriétés disponibles. Vous pouvez également créer une autre fonction pour comparer plus de deux objets à la fois.

Maintenant, considérons que nous avons deux objets avec de nombreuses propriétés et que nous voulons comparer toutes ces propriétés. Faire ce genre de fonction prendra beaucoup de temps.

Au lieu de cela, nous pouvons utiliser la fonction Object.keys() pour obtenir toutes les clés ou propriétés d’une fonction et les comparer à l’aide d’une boucle. Si toutes les propriétés sont les mêmes, la fonction retournera true ; sinon, il retournera false.

Par exemple, créons cette fonction et testons-la avec les deux objets ci-dessus. Voir le code ci-dessous.

function ObjCompare(obj1, obj2) {
  const Obj1_keys = Object.keys(obj1);
  const Obj2_keys = Object.keys(obj2);
  if (Obj1_keys.length !== Obj2_keys.length) {
    return false;
  }
  for (let k of Obj1_keys) {
    if (obj1[k] !== obj2[k]) {
      return false;
    }
  }
  return true;
}
const fruit1 = {
  name: 'Apple',
  price: '2',
  color: 'red'
};
const fruit2 = {
  price: '2',
  name: 'Apple',
  color: 'red'
};
console.log(ObjCompare(fruit1, fruit2))

Production:

true

Dans ce programme, la première instruction if à l’intérieur de la fonction ObjCompare() est utilisée pour vérifier la longueur des propriétés ou des clés à l’intérieur des deux objets.

S’ils ne sont pas égaux, la fonction retournera false et ne passera pas à la boucle. Cette méthode fonctionne bien même si nous modifions l’ordre des propriétés ou les clés de l’un des objets. Vous pouvez également modifier cette fonction pour comparer trois objets ou plus à la fois.