Wie man zwei Objekte vergleicht (vergleicht).

Objektvergleich in JavaScript

Der Objektvergleich in JavaScript ist täuschend komplex. Während der Vergleich primitiver Werte wie Zahlen und Zeichenfolgen unkompliziert ist, kann der Vergleich von Objekten zu unerwarteten Ergebnissen führen. Lassen Sie uns verschiedene Ansätze zum Objektvergleich untersuchen und eine robuste Lösung zum Erkennen von Änderungen zwischen Objekten entwickeln.

Die Fallstricke des direkten Vergleichs

Wenn Entwickler zum ersten Mal auf Objektvergleiche in JavaScript stoßen, versuchen sie oft so etwas:

const user1 = { name: "John", age: 30 };
const user2 = { name: "John", age: 30 };

console.log(user1 === user2); // false

Überraschenderweise gibt dies „false“ zurück, obwohl beide Objekte identischen Inhalt haben. Dies liegt daran, dass JavaScript Objektreferenzen vergleicht, nicht deren Werte. Beide Objekte verweisen auf unterschiedliche Speicherorte.

Einfache Vergleichsansätze

1. JSON.stringify

Eine schnelle Möglichkeit, Objekte zu vergleichen, ist die Verwendung von JSON.stringify:

const areEqual = (obj1, obj2) => 
  JSON.stringify(obj1) === JSON.stringify(obj2);

console.log(areEqual(user1, user2)); // true

Dies funktioniert zwar in einfachen Fällen, weist jedoch Einschränkungen auf:

• Verarbeitet keine Funktionen
• Die Reihenfolge der Eigenschaften ist wichtig
• Zirkelverweise können nicht verarbeitet werden
• Bietet keine Informationen darüber, was anders ist

2. Aufbau eines besseren Objektunterschieds

Lassen Sie uns eine ausgefeiltere Lösung erstellen, die nicht nur Unterschiede erkennt, sondern uns auch sagt, was sich geändert hat:

function getObjectDiff(original, current) {
  const changes = {};

  // Check current object's properties
  for (const [key, value] of Object.entries(current)) {
    if (!(key in original)) {
      changes[key] = {
        oldValue: undefined,
        newValue: value
      };
      continue;
    }

    const originalValue = original[key];
    const currentValue = value;

    // Handle different types of comparisons
    if (
      originalValue !== currentValue &&
      String(originalValue) !== String(currentValue) &&
      JSON.stringify(originalValue) !== JSON.stringify(currentValue)
    ) {
      changes[key] = {
        oldValue: originalValue,
        newValue: currentValue
      };
    }
  }

  // Check for removed properties
  for (const key of Object.keys(original)) {
    if (!(key in current)) {
      changes[key] = {
        oldValue: original[key],
        newValue: undefined
      };
    }
  }

  return Object.keys(changes).length === 0 ? null : changes;
}

Diese Implementierung:

• Gibt null zurück, wenn Objekte identisch sind
• Behandelt Typzwang (z. B. „30“ vs. 30)
• Erkennt hinzugefügte und entfernte Eigenschaften
• Bietet detaillierte Änderungsinformationen

Anwendungen aus der Praxis

Diese Art des Objektvergleichs ist besonders nützlich für:

1. Formularänderungsverfolgung: Erkennen Sie, welche Felder in einem Formular geändert wurden

const originalForm = { name: "John", email: "john@example.com" };
const currentForm = { name: "John", email: "john.doe@example.com" };
console.log(getObjectDiff(originalForm, currentForm));
// Output: { email: { oldValue: "john@example.com", newValue: "john.doe@example.com" } }

1. Statusverwaltung: Verfolgen Sie, welche Teile Ihres Bewerbungsstatus sich geändert haben
2. API-Updates: Bestimmen Sie, welche Felder in PATCH-Anfragen gesendet werden sollen
3. Audit-Protokollierung: Zeichnen Sie spezifische Änderungen an Daten auf

Randfälle (bei denen Sie möglicherweise noch einen Schritt weiter gehen müssen)

1. Verschachtelte Objekte: Tiefer Vergleich vs. flacher Vergleich
2. Arrays: Reihenfolgensensitivität und Referenzvergleich
3. Type Coercion: String vs. Number-Vergleiche
4. Spezielle Werte: undefiniert, null, NaN
5. Leistung: Ein tiefer Vergleich kann bei großen Objekten teuer sein

PS: Hier ist ein Github-Gist für eine einfache Funktion zum Vergleichen und Ermitteln der Differenz zwischen zwei Objekten:

Das obige ist der detaillierte Inhalt vonWie man zwei Objekte vergleicht (vergleicht).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!