Bagaimana untuk Melaksanakan Perbezaan Dalam Generik untuk Objek dan Tatasusunan dalam JavaScript?

Generic Deep Diff Between Two Objects

Deep diffing two objects involves identifying changes between them, including additions, updates, and deletions. This can be complex, especially for nested objects and arrays.

Existing Library or Code for Generic Deep Diff

One approach is to implement a generic deepDiffBetweenObjects method that returns an object indicating changes as:

{add:{...},upd:{...},del:{...}}

However, a more granular representation is desirable to capture updates within the object structure.

Enhanced Representation Using Updated Object Structure

An improved representation uses the same object structure as the updated object (newObj) but transforms property values into objects:

{type: '<update|create|delete>', data: <propertyValue>}

For instance, if newObj.prop1 = 'new value' and oldObj.prop1 = 'old value', the result would be:

returnObj.prop1 = {type: 'update', data: 'new value'}

Handling Arrays

Arrays introduce additional complexity, as determining equivalence is not straightforward. For example, the arrays:

[1,[{c: 1},2,3],{a:'hey'}]

and

[{a:'hey'},1,[3,{c: 1},2]]

should be considered equal. Deep value equality can be complex to check, and representing array changes effectively is also challenging.

Sample Implementation

Here's an implementation of a class that can perform generic deep diffing:

var deepDiffMapper = function () {
  return {
    map: function(obj1, obj2) {
      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
        };
      }

      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);
      }
      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) {
      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;
    },
    ...
  }
}();

An example usage:

var result = deepDiffMapper.map({
  a: 'i am unchanged',
  b: 'i am deleted',
  ...
}, {
  a: 'i am unchanged',
  c: 'i am created',
  ...
});
console.log(result);

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Perbezaan Dalam Generik untuk Objek dan Tatasusunan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!