>  기사  >  웹 프론트엔드  >  깊게 중첩된 두 JavaScript 객체 사이의 깊은 차이점을 어떻게 효과적으로 찾고 표현할 수 있습니까?

깊게 중첩된 두 JavaScript 객체 사이의 깊은 차이점을 어떻게 효과적으로 찾고 표현할 수 있습니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-19 16:02:02605검색

How can you effectively find and represent the deep differences between two deeply nested JavaScript objects?

깊게 중첩된 두 객체 사이의 차이점 찾기

문제: 표현 기술을 통합하여 명확하게 표현 기술을 통합하여 깊이 중첩된 두 JavaScript 객체 간의 깊은 차이점을 계산합니다. 변경 사항을 식별합니다.

세부 정보: oldObj와 newObj라는 두 개체가 주어지면 값, 구조 및 배열 순서의 변경을 포함하여 두 개체 간의 차이점을 확인하려면 사용자 정의 diff 알고리즘이 필요합니다. 출력은 명확하고 JSON 직렬화 가능한 방식으로 표현되어야 합니다.

해결책:

이 문제를 해결하기 위해 사용자 정의 클래스인 deepDiffMapper가 설계되었습니다.

var deepDiffMapper = function () {
  return {

    // Constants representing change types
    VALUE_CREATED: 'created',
    VALUE_UPDATED: 'updated',
    VALUE_DELETED: 'deleted',
    VALUE_UNCHANGED: 'unchanged',

    map: function(obj1, obj2) {
      // Algorithm for comparing objects

      return diff;
    },
    
    compareValues: function (value1, value2) {
      // Logic for determining value changes
      
      return result;
    },

    // Helper functions to identify object types
    ...
  }
}();

사용법:

이 클래스를 사용하려면 두 객체를 인수로 사용하여 map 메소드를 호출하면 됩니다.

var result = deepDiffMapper.map(oldObj, newObj);

출력 :

map 메소드는 두 입력 객체 간의 차이를 나타내는 객체를 반환합니다. 이 객체의 키는 newObj의 속성에 해당합니다. 각 값 자체는 다음 속성을 가진 개체입니다.

  • type: 변경 유형(생성, 업데이트, 삭제 또는 변경되지 않음)
  • data: 업데이트되거나 새 값( 생성 또는 업데이트의 경우)

예:

다음 입력 개체가 주어지면:

var 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')
};

var 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')
};

지도 메소드는 차이점을 나타내는 다음 객체를 반환합니다.

{
  b: {
    type: 'deleted',
    data: undefined
  },
  c: {
    type: 'created',
    data: 'i am created'
  },
  e: {
    a: {
      type: 'updated',
      data: '1'
    },
    b: {
      type: 'updated',
      data: ''
    },
    d: {
      type: 'created',
      data: 'created'
    }
  },
  f: {
    1: {
      type: 'deleted',
      data: undefined
    },
    2: {
      b: {
        1: {
          d: {
            type: 'deleted',
            data: undefined
          }
        },
        2: {
          c: {
            type: 'created',
            data: 'create'
          }
        }
      }
    }
  }
}

이 표현은 생성, 업데이트 및 삭제된 속성을 강조하여 객체에 대한 변경 사항을 명확하게 보여줍니다.

위 내용은 깊게 중첩된 두 JavaScript 객체 사이의 깊은 차이점을 어떻게 효과적으로 찾고 표현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.