如何在 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);

以上是如何在 JavaScript 中實現物件和陣列的通用深度差異？的詳細內容。更多資訊請關注PHP中文網其他相關文章！