JavaScript에서 객체 및 배열에 대한 일반 Deep Diff를 구현하는 방법은 무엇입니까?

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에서 객체 및 배열에 대한 일반 Deep Diff를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!