두 개체를 비교(diff)하는 방법-JS 튜토리얼-php.cn

두 개체를 비교(diff)하는 방법

DDD

풀어 주다： 2024-10-23 19:44:02

원래의

935명이 탐색했습니다.

How to Compare (diff) two Objects

JavaScript의 객체 비교

JavaScript의 객체 비교는 믿을 수 없을 정도로 복잡합니다. 숫자나 문자열과 같은 기본 값을 비교하는 것은 간단하지만 객체를 비교하면 예상치 못한 결과가 발생할 수 있습니다. 객체 비교에 대한 다양한 접근 방식을 살펴보고 객체 간의 변경 사항을 감지하기 위한 강력한 솔루션을 구축해 보겠습니다.

직접 비교의 함정

개발자는 JavaScript에서 객체 비교를 처음 접할 때 다음과 같은 방법을 시도하는 경우가 많습니다.

const user1 = { name: "John", age: 30 };
const user2 = { name: "John", age: 30 };

console.log(user1 === user2); // false

로그인 후 복사

놀랍게도 두 개체의 내용이 동일하더라도 false를 반환합니다. 이는 JavaScript가 해당 값이 아닌 객체 참조를 비교하기 때문에 발생합니다. 두 객체 모두 메모리의 서로 다른 위치를 가리킵니다.

간단한 비교 접근법

1. JSON.stringify

객체를 비교하는 빠른 방법은 JSON.stringify를 사용하는 것입니다.

const areEqual = (obj1, obj2) => 
  JSON.stringify(obj1) === JSON.stringify(obj2);

console.log(areEqual(user1, user2)); // true

로그인 후 복사

간단한 경우에는 작동하지만 다음과 같은 제한 사항이 있습니다.

기능을 처리하지 않습니다
속성 순서가 중요합니다
순환 참조를 처리할 수 없습니다
차이점에 대한 정보를 제공하지 않습니다

2. 더 나은 객체 비교 구축

차이점을 감지할 뿐만 아니라 변경된 내용도 알려주는 더욱 정교한 솔루션을 만들어 보겠습니다.

function getObjectDiff(original, current) {
  const changes = {};

  // Check current object's properties
  for (const [key, value] of Object.entries(current)) {
    if (!(key in original)) {
      changes[key] = {
        oldValue: undefined,
        newValue: value
      };
      continue;
    }

    const originalValue = original[key];
    const currentValue = value;

    // Handle different types of comparisons
    if (
      originalValue !== currentValue &&
      String(originalValue) !== String(currentValue) &&
      JSON.stringify(originalValue) !== JSON.stringify(currentValue)
    ) {
      changes[key] = {
        oldValue: originalValue,
        newValue: currentValue
      };
    }
  }

  // Check for removed properties
  for (const key of Object.keys(original)) {
    if (!(key in current)) {
      changes[key] = {
        oldValue: original[key],
        newValue: undefined
      };
    }
  }

  return Object.keys(changes).length === 0 ? null : changes;
}

로그인 후 복사

이 구현:

개체가 동일한 경우 null을 반환합니다
유형 강제 처리(예: "30" 대 30)
추가 및 제거된 속성 감지
상세 변경정보 제공

실제 응용 프로그램

이러한 유형의 개체 비교는 다음과 같은 경우에 특히 유용합니다.

양식 변경 사항 추적: 양식에서 어떤 필드가 변경되었는지 감지

const originalForm = { name: "John", email: "john@example.com" };
const currentForm = { name: "John", email: "john.doe@example.com" };
console.log(getObjectDiff(originalForm, currentForm));
// Output: { email: { oldValue: "john@example.com", newValue: "john.doe@example.com" } }

로그인 후 복사