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

두 개체 간의 일반 심층 차이

두 개체의 심층 비교에는 추가, 업데이트, 삭제를 포함하여 개체 간의 변경 사항을 식별하는 작업이 포함됩니다. 이는 특히 중첩된 객체와 배열의 경우 복잡할 수 있습니다.

일반 심층 차이에 대한 기존 라이브러리 또는 코드

한 가지 접근 방식은 다음을 반환하는 일반 deepDiffBetweenObjects 메서드를 구현하는 것입니다. 변경 사항을 다음과 같이 나타내는 객체:

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

그러나 객체 구조 내의 업데이트를 캡처하려면 보다 세부적인 표현이 바람직합니다.

업데이트된 객체 구조를 사용하여 향상된 표현

향상된 표현은 업데이트된 객체(newObj)와 동일한 객체 구조를 사용하지만 속성 값을 객체로 변환합니다.

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

예를 들어 newObj.prop1 = 'new value' 및 oldObj인 경우입니다. prop1 = '이전 값'인 경우 결과는 다음과 같습니다.

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

배열 처리

동등성을 결정하는 것이 간단하지 않기 때문에 배열은 추가적인 복잡성을 가져옵니다. 예를 들어

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

및

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

배열은 동일한 것으로 간주되어야 합니다. 깊은 값 동일성은 확인하기 복잡할 수 있으며 배열 변경 사항을 효과적으로 나타내는 것도 어렵습니다.

샘플 구현

다음은 일반적인 심층 비교를 수행할 수 있는 클래스의 구현입니다. :

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

사용 예:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!