> 웹 프론트엔드 > JS 튜토리얼 > 일반 심층 비교 알고리즘은 중첩된 속성, 배열 및 기타 구조가 있는 복잡한 개체 간의 차이점을 어떻게 효과적으로 강조할 수 있습니까?

일반 심층 비교 알고리즘은 중첩된 속성, 배열 및 기타 구조가 있는 복잡한 개체 간의 차이점을 어떻게 효과적으로 강조할 수 있습니까?

Susan Sarandon
풀어 주다: 2024-11-23 09:19:28
원래의
802명이 탐색했습니다.

How can a generic deep diff algorithm effectively highlight differences between complex objects with nested properties, arrays, and other structures?

두 개체 간의 일반 심층 차이

소프트웨어 개발에서는 두 개체 간의 차이점을 확인해야 하는 경우가 종종 있습니다. 이는 기본 데이터 유형으로 작업할 때 간단한 프로세스일 수 있지만 중첩된 속성, 배열 및 기타 복잡한 구조를 포함하는 심층 개체를 처리할 때 더욱 복잡해집니다.

구현 세부 정보

최근에 접한 이 문제를 해결하고 일반적인 심층 비교 알고리즘이 가장 효과적인 접근 방식이라는 것을 발견했습니다. 여기에는 두 개체를 재귀적으로 순회하고, 해당 값을 비교하고, 차이점을 나타내는 결과 개체를 생성하는 작업이 포함됩니다.

이를 달성하기 위해 다음 솔루션을 개발했습니다.

const deepDiffMapper = {
  VALUE_CREATED: 'created',
  VALUE_UPDATED: 'updated',
  VALUE_DELETED: 'deleted',
  VALUE_UNCHANGED: 'unchanged',
  map: function(obj1, obj2) {
    // Handling functions and primitive values separately.
    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
      };
    }

    // Building a diff object for nested properties.
    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);
    }

    // Adding properties present in obj2 but not in obj1.
    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) {
    // Comparison of primitive values, dates, and null.
    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;
  },
  ...helper functions...
};
로그인 후 복사

사용 예

이 솔루션을 설명하려면 다음 두 개체를 고려하세요.

const oldObj = {
  a: 'i am unchanged',
  b: 'i am deleted',
  e: {
    a: 1,
    b: false,
    c: null
  },
  f: [1, {
    a: 'same',
    b: [{
      a: 'same'
  }, {
    d: 'delete'
  }]
}],
g: new Date('2017.11.25')
};

const newObj = {
  a: 'i am unchanged',
  c: 'i am created',
  e: {
    a: '1',
    b: '',
    d: 'created'
  },
  f: [{
  a: 'same',
  b: [{
    a: 'same'
  }, {
    c: 'create'
  }]
  }, 1],
  g: new Date('2017.11.25')
};
로그인 후 복사

심층 실행 이러한 개체에 대한 diff 알고리즘은 다음 결과를 생성합니다.

{
  a: { type: 'unchanged' },
  b: { type: 'deleted' },
  c: { type: 'created', data: 'i am created' },
  e: {
    a: { type: 'updated', data: '1' },
    b: { type: 'updated', data: '' },
    c: { type: 'unchanged' },
    d: { type: 'created', data: 'created' }
  },
  f: {
    0: { type: 'unchanged' },
    1: {
      a: { type: 'unchanged' },
      b: {
        0: { type: 'unchanged' },
        1: { type: 'deleted' },
        2: { type: 'created', data: { c: 'create' } }
      }
    }
  }
}
로그인 후 복사

이 결과는 두 개체 간의 차이점을 정확하게 캡처하여 'b' 속성이 삭제되고 새 속성 'c'가 생성되었음을 나타냅니다. 'e' 객체에는 여러 가지 업데이트 및 생성된 속성이 있었고 배열 'f'에는 일부 변경이 있었습니다.

위 내용은 일반 심층 비교 알고리즘은 중첩된 속성, 배열 및 기타 구조가 있는 복잡한 개체 간의 차이점을 어떻게 효과적으로 강조할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿