如何在 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中文网其他相关文章！