Vier Möglichkeiten zum Vergleichen von JavaScript-Objekten

Vorwort

Das Vergleichen primitiver Werte in JavaScript ist sehr einfach. Verwenden Sie einfach einen der verfügbaren Gleichheitsoperatoren, beispielsweise den strikten Gleichheitsoperator:

'a' === 'c'; // => falsch
1 === 1; // => wahr

Objekte verfügen jedoch über strukturierte Daten, sodass ein Vergleich schwieriger ist. In diesem Artikel erfahren Sie, wie Sie Objekte in JavaScript richtig vergleichen.

Referenzvergleich

JavaScript bietet drei Methoden zum Vergleichen von Werten:

• Strikter Gleichheitsoperator ===
• Lockerer Gleichheitsoperator ==
• Object.is()-Funktion

Wenn Objekte mit einer der oben genannten Methoden verglichen werden, wird der Vergleich nur dann als „true“ ausgewertet, wenn sich die verglichenen Werte auf dieselbe Objektinstanz beziehen. Dies ist Referenzgleichheit .

Definieren wir die Objekte hero1 und hero2 und sehen uns die referenzielle Gleichheit in Aktion an:

const hero1 = {
  Name: "Batman"
};
const hero2 = {
  Name: "Batman"
};

hero1 === hero1; // => wahr
Held1 === Held2; // => falsch

hero1 == hero1; // => wahr
Held1 == Held2; // => falsch

Objekt.ist(hero1, hero1); // => wahr
Objekt.ist(hero1, hero2); // => falsch

hero1 === hero1 wird als „true“ ausgewertet, da beide Operanden auf dieselbe Objektinstanz, hero1, verweisen.

Andererseits wird hero1 === hero2 als „false“ ausgewertet, da hero1 und hero2 unterschiedliche Objektinstanzen sind.

Interessanterweise sind die Inhalte der Objekte hero1 und hero2 identisch: Beide Objekte haben eine Namenseigenschaft, deren Wert „Batman“ ist. Allerdings wird hero1 === hero2 auch beim Vergleich von Objekten mit derselben Struktur als „false“ ausgewertet.

Referenzgleichheit ist nützlich, wenn Sie Objektreferenzen und nicht deren Inhalte vergleichen möchten. In den meisten Fällen möchten Sie jedoch den tatsächlichen Inhalt von Objekten vergleichen, also Eigenschaften und deren Werte.

Sehen wir uns als Nächstes an, wie Objekte anhand ihres Inhalts verglichen werden.

Manueller Vergleich

Der einfachste Weg, Objekte anhand ihres Inhalts zu vergleichen, besteht darin, die Eigenschaften zu lesen und sie manuell zu vergleichen.

Schreiben wir beispielsweise eine spezielle Funktion isHeroEqual(), um zwei Hero-Objekte zu vergleichen:

Funktion isHeroEqual(Objekt1, Objekt2) {
  gibt Objekt1.Name === Objekt2.Name zurück;
}

const hero1 = {
  Name: "Batman"
};
const hero2 = {
  Name: "Batman"
};
const hero3 = {
  Name: 'Joker'
};

isHeroEqual(Held1, Held2); // => wahr
isHeroEqual(hero1, hero3); // => falsch

isHeroEqual() greift auf die Name-Eigenschaft beider Objekte zu und vergleicht deren Werte.

Wenn die verglichenen Objekte bestimmte Eigenschaften haben, schreibe ich lieber eine Vergleichsfunktion wie isHeroEqual(). Dieser Funktionstyp weist eine gute Leistung auf: Am Vergleich sind nur wenige Eigenschaftszugriffsfunktionen und Gleichheitsoperatoren beteiligt.

Der manuelle Vergleich erfordert die manuelle Extraktion von Eigenschaften, was bei einfachen Objekten kein Problem darstellt. Für den Vergleich größerer Objekte (oder Objekte mit unbekannter Struktur) ist dies jedoch nicht geeignet, da es viel Boilerplate-Code erfordert.

Sehen wir uns also an, wie ein oberflächlicher Vergleich von Objekten hilfreich sein kann.

Oberflächlicher Vergleich

Wenn Sie Objekte mithilfe eines oberflächlichen Vergleichs prüfen, müssen Sie eine Liste der Eigenschaften beider Objekte abrufen (mithilfe von Object.keys()) und dann prüfen, ob ihre Eigenschaftswerte gleich sind.

Der folgende Code ist eine Implementierung eines oberflächlichen Vergleichs:

Funktion flachEqual(Objekt1, Objekt2) {
  const keys1 = Objekt.keys(Objekt1);
  const keys2 = Objekt.keys(Objekt2);

  wenn (Schlüssel1.Länge !== Schlüssel2.Länge) {
    gibt false zurück;
  }

  für (let index = 0; index < keys1.length; index++) {
    const val1 = Objekt1[Schlüssel1[Index]];
    const val2 = Objekt2[Schlüssel2[Index]];
    wenn (Wert1 !== Wert2) {
      gibt false zurück;
    }
  }

  gibt true zurück;
}

Innerhalb der Funktion sind keys1 und keys2 Arrays, die die Namen der Eigenschaften von object1 bzw. object2 enthalten.

Iterieren Sie mit einer For-Schleife über die Schlüssel und vergleichen Sie jede Eigenschaft von Objekt1 und Objekt2.

Mithilfe eines oberflächlichen Vergleichs können Sie problemlos die Gleichheit von Objekten mit vielen Eigenschaften überprüfen:

const hero1 = {
  Name: "Batman",
  richtiger Name: „Bruce Wayne“
};
const hero2 = {
  Name: "Batman",
  richtiger Name: „Bruce Wayne“
};
const hero3 = {
  Name: 'Joker'
};

flachEqual(Held1, Held2); // => wahr
flachEqual(Held1, Held3); // => falsch

shallowEqual(hero1, hero2) gibt true zurück, da die Objekte hero1 und hero2

Dieselben Attribute (Name und RealName), und die Werte sind auch dieselben.

Da hero1 und hero3 andererseits unterschiedliche Eigenschaften haben, gibt shallowEqual(hero1, hero3) false zurück.

Aber Objekte in JavaScript können verschachtelt werden. Oberflächliche Vergleiche funktionieren in diesem Fall nicht gut.

Im Folgenden wird eine oberflächliche Vergleichsprüfung für ein Objekt mit verschachtelten Objekten durchgeführt:

const hero1 = {
  Name: "Batman",
  Adresse:
    Stadt: 'Gotham'
  }
};
const hero2 = {
  Name: "Batman",
  Adresse:
    Stadt: 'Gotham'
  }
};

flachEqual(Held1, Held2); // => falsch

Obwohl die beiden Objekte hero1 und hero2 denselben Inhalt haben, gibt shallowEqual(hero1, hero2) dieses Mal „false“ zurück.

Dies liegt daran, dass die verschachtelten Objekte hero1.address und hero2.address unterschiedliche Objektinstanzen sind. Daher betrachtet der oberflächliche Vergleich hero1.address und hero2.address als zwei verschiedene Werte.

Um das Problem verschachtelter Objekte zu lösen, ist ein gründlicher Vergleich erforderlich.

Umfassender Vergleich

Der tiefe Vergleich ähnelt dem oberflächlichen Vergleich, mit dem Unterschied, dass bei Eigenschaften, die Objekte enthalten, ein rekursiver oberflächlicher Vergleich der verschachtelten Objekte durchgeführt wird.

Schauen Sie sich die Implementierung des tiefen Vergleichs an:

Funktion deepEqual(Objekt1, Objekt2) {
  const keys1 = Objekt.keys(Objekt1);
  const keys2 = Objekt.keys(Objekt2);

  wenn (Schlüssel1.Länge !== Schlüssel2.Länge) {
    gibt false zurück;
  }

  für (let index = 0; index < keys1.length; index++) {
    const val1 = Objekt1[Schlüssel1[Index]];
    const val2 = Objekt2[Schlüssel2[Index]];
    const areObjects = istObjekt(Wert1) und istObjekt(Wert2);
    wenn (areObjects && !deepEqual(val1, val2) || 
        !sindObjekte && val1 !== val2) {
      gibt false zurück;
    }
  }

  gibt true zurück;
}

Funktion istObjekt(Objekt) {
  Objekt zurückgeben != null und Objekttyp === „Objekt“;
}

Zeile 13 areObjects && !deepEqual(val1, val2) Sobald die überprüfte Eigenschaft ein Objekt ist, beginnt der rekursive Aufruf zu prüfen, ob die verschachtelten Objekte ebenfalls gleich sind.

Vergleichen wir nun Objekte mit verschachtelten Objekten mithilfe von deepEquality():

const hero1 = {
  Name: "Batman",
  Adresse:
    Stadt: 'Gotham'
  }
};
const hero2 = {
  Name: "Batman",
  Adresse:
    Stadt: 'Gotham'
  }
};

deepEqual(Held1, Held2); // => wahr

Die Funktion für den ausführlichen Vergleich bestimmt korrekt, ob hero1 und hero2 dieselben Eigenschaften und Werte haben, einschließlich der Gleichheit der verschachtelten Objekte hero1.address und hero2.address.

Für einen gründlichen Vergleich von Objekten empfehle ich die Verwendung von isDeepStrictEqual(object1, object2) aus dem integrierten Util-Modul von Node oder _.isEqual(object1, object2) aus der Lodash-Bibliothek.

Zusammenfassen

Referenzgleichheit (mithilfe von ===, == oder Object.is()) wird verwendet, um zu bestimmen, ob die Operanden dieselbe Objektinstanz sind.

Die manuelle Überprüfung auf Objektgleichheit erfordert einen manuellen Vergleich der Eigenschaftswerte. Obwohl diese Art der Prüfung eine manuelle Codierung zum Vergleichen der Attribute erfordert, ist sie praktisch, weil sie einfach ist.

Ein besserer Ansatz besteht darin, eine oberflächliche Prüfung durchzuführen, wenn die verglichenen Objekte viele Eigenschaften haben oder wenn die Struktur der Objekte zur Laufzeit bestimmt wird.

Wenn die zu vergleichenden Objekte verschachtelte Objekte haben, sollte eine gründliche Vergleichsprüfung durchgeführt werden.

Oben sind die Details der vier Möglichkeiten zum Vergleichen von JavaScript-Objekten aufgeführt. Weitere Informationen zu JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!