Heim > Web-Frontend > js-Tutorial > Wie kann ein generischer Deep-Diff-Algorithmus Unterschiede zwischen komplexen Objekten mit verschachtelten Eigenschaften, Arrays und anderen Strukturen effektiv hervorheben?

Wie kann ein generischer Deep-Diff-Algorithmus Unterschiede zwischen komplexen Objekten mit verschachtelten Eigenschaften, Arrays und anderen Strukturen effektiv hervorheben?

Susan Sarandon
Freigeben: 2024-11-23 09:19:28
Original
800 Leute haben es durchsucht

How can a generic deep diff algorithm effectively highlight differences between complex objects with nested properties, arrays, and other structures?

Generischer tiefer Unterschied zwischen zwei Objekten

In der Softwareentwicklung ist es oft notwendig, die Unterschiede zwischen zwei Objekten zu bestimmen. Dies kann bei der Arbeit mit primitiven Datentypen ein einfacher Prozess sein, wird jedoch komplizierter, wenn es um tiefe Objekte geht, die verschachtelte Eigenschaften, Arrays und andere komplexe Strukturen enthalten.

Implementierungsdetails

Ich bin kürzlich darauf gestoßen Wir stellten uns dieser Herausforderung und stellten fest, dass ein generischer Deep-Diff-Algorithmus der effektivste Ansatz war. Dabei werden beide Objekte rekursiv durchlaufen, ihre Werte verglichen und ein Ergebnisobjekt generiert, das die Unterschiede darstellt.

Um dies zu erreichen, habe ich die folgende Lösung entwickelt:

const deepDiffMapper = {
  VALUE_CREATED: 'created',
  VALUE_UPDATED: 'updated',
  VALUE_DELETED: 'deleted',
  VALUE_UNCHANGED: 'unchanged',
  map: function(obj1, obj2) {
    // Handling functions and primitive values separately.
    if (this.isFunction(obj1) || this.isFunction(obj2)) {
      throw 'Invalid argument. Function given, object expected.';
    }
    if (this.isValue(obj1) || this.isValue(obj2)) {
      return {
        type: this.compareValues(obj1, obj2),
        data: obj1 === undefined ? obj2 : obj1
      };
    }

    // Building a diff object for nested properties.
    var diff = {};
    for (var key in obj1) {
      if (this.isFunction(obj1[key])) {
        continue;
      }
      var value2 = undefined;
      if (obj2[key] !== undefined) {
        value2 = obj2[key];
      }
      diff[key] = this.map(obj1[key], value2);
    }

    // Adding properties present in obj2 but not in obj1.
    for (var key in obj2) {
      if (this.isFunction(obj2[key]) || diff[key] !== undefined) {
        continue;
      }
      diff[key] = this.map(undefined, obj2[key]);
    }
    return diff;
  },
  compareValues: function (value1, value2) {
    // Comparison of primitive values, dates, and null.
    if (value1 === value2) {
      return this.VALUE_UNCHANGED;
    }
    if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {
      return this.VALUE_UNCHANGED;
    }
    if (value1 === undefined) {
      return this.VALUE_CREATED;
    }
    if (value2 === undefined) {
      return this.VALUE_DELETED;
    }
    return this.VALUE_UPDATED;
  },
  ...helper functions...
};
Nach dem Login kopieren

Beispielverwendung

Um diese Lösung zu veranschaulichen, betrachten Sie die folgenden zwei Objekte:

const oldObj = {
  a: 'i am unchanged',
  b: 'i am deleted',
  e: {
    a: 1,
    b: false,
    c: null
  },
  f: [1, {
    a: 'same',
    b: [{
      a: 'same'
  }, {
    d: 'delete'
  }]
}],
g: new Date('2017.11.25')
};

const newObj = {
  a: 'i am unchanged',
  c: 'i am created',
  e: {
    a: '1',
    b: '',
    d: 'created'
  },
  f: [{
  a: 'same',
  b: [{
    a: 'same'
  }, {
    c: 'create'
  }]
  }, 1],
  g: new Date('2017.11.25')
};
Nach dem Login kopieren

Ausführen des Deep-Diff-Algorithmus auf diese Objekte erzeugen das folgende Ergebnis:

{
  a: { type: 'unchanged' },
  b: { type: 'deleted' },
  c: { type: 'created', data: 'i am created' },
  e: {
    a: { type: 'updated', data: '1' },
    b: { type: 'updated', data: '' },
    c: { type: 'unchanged' },
    d: { type: 'created', data: 'created' }
  },
  f: {
    0: { type: 'unchanged' },
    1: {
      a: { type: 'unchanged' },
      b: {
        0: { type: 'unchanged' },
        1: { type: 'deleted' },
        2: { type: 'created', data: { c: 'create' } }
      }
    }
  }
}
Nach dem Login kopieren

Dieses Ergebnis erfasst genau die Unterschiede zwischen den beiden Objekten und zeigt an, dass die Eigenschaft „b“ gelöscht wurde, eine neue Eigenschaft „c“ erstellt wurde, die Eigenschaft „e“ Das Objekt verfügte über mehrere aktualisierte und erstellte Eigenschaften und das Array „f“ erfuhr einige Änderungen.

Das obige ist der detaillierte Inhalt vonWie kann ein generischer Deep-Diff-Algorithmus Unterschiede zwischen komplexen Objekten mit verschachtelten Eigenschaften, Arrays und anderen Strukturen effektiv hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage