JavaScript 배열의 중복 처리: 기술 및 모범 사례

JavaScript 개발에서는 데이터를 효율적으로 관리하는 것이 중요합니다. 개발자가 직면하는 일반적인 과제 중 하나는 배열의 중복 값을 처리하는 것입니다. 이 기사에서는 단순 배열과 객체 배열에 중점을 두고 중복을 식별하고 제거하는 다양한 방법을 살펴보겠습니다.

배열의 중복 이해

배열 작업 시 중복으로 인해 잘못된 결과, 비효율적인 처리 또는 애플리케이션의 예상치 못한 동작이 발생할 수 있습니다. 따라서 중복 항목을 효과적으로 필터링하려면 강력한 전략을 구현하는 것이 중요합니다.

1. 단순 배열에서 중복 제거

간단한 예부터 시작해 보겠습니다. 중복된 숫자가 포함된 숫자 배열이 있다고 가정해 보겠습니다.

let numberArray = [1, 2, 3, 3, 4, 5, 6, 5, 7, 10, 9, 9];
let uniqueNumbers = [];

for (let i = 0; i < numberArray.length; i++) {
  let isDuplicate = false;

  for (let j = 0; j < uniqueNumbers.length; j++) {
    if (numberArray[i] === uniqueNumbers[j]) {
      isDuplicate = true;
      break;
    }
  }

  if (!isDuplicate) {
    uniqueNumbers.push(numberArray[i]);
  }
}

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6, 7, 10, 9]

설명:

• 외부 루프: 원래 배열(numberArray)의 각 요소를 반복합니다.
• 내부 루프: 현재 요소가 UniqueNumbers 배열에 이미 존재하는지 확인합니다. 그렇다면 isDuplicate 플래그를 true로 설정하고 내부 루프를 중단합니다.
• 조건: 요소가 중복되지 않으면 고유번호에 추가됩니다.

이 접근 방식은 작동하지만 O(n²) 시간 복잡성으로 인해 성능이 저하될 수 있으므로 대규모 데이터세트에는 적합하지 않습니다.

2. 객체 배열의 중복 처리

객체 배열을 처리할 때 ID 필드와 같은 특정 속성을 기반으로 중복 항목을 제거할 수 있습니다. 다음은 이를 달성하는 방법을 보여주는 예입니다.

let userArray = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
  { id: 3, name: 'Bob' }, // Duplicate
  { id: 4, name: 'Alice' },
  { id: 5, name: 'Eve' },
  { id: 5, name: 'Eve' }, // Duplicate
  { id: 6, name: 'Charlie' },
  { id: 7, name: 'David' },
  { id: 10, name: 'Edward' },
  { id: 9, name: 'Frank' },
  { id: 9, name: 'Frank' } // Duplicate
];

let uniqueUsers = [];

for (let i = 0; i < userArray.length; i++) {
  let isDuplicate = false;

  // Compare based on the 'id' property
  for (let j = 0; j < uniqueUsers.length; j++) {
    if (userArray[i].id === uniqueUsers[j].id) {
      isDuplicate = true;
      break;
    }
  }

  // If it's not a duplicate, add the object to the unique array
  if (!isDuplicate) {
    uniqueUsers.push(userArray[i]);
  }
}

console.log(uniqueUsers);

설명:

• 이 코드는 이전 예제와 유사한 논리를 따르지만 배열에 있는 개체의 id 속성을 기반으로 중복 항목을 확인합니다.

3. 중복 제거를 위한 최선의 접근 방식

더 큰 데이터 세트의 경우 더 효율적인 접근 방식은 지도나 객체를 사용하여 표시된 식별자를 추적하는 것입니다. 다음은 세련된 예입니다.

let numberArray = [1, 2, 3, 3, 4, 5, 6, 5, 7, 10, 9, 9];
let uniqueNumbers = [];

for (let i = 0; i < numberArray.length; i++) {
  let isDuplicate = false;

  for (let j = 0; j < uniqueNumbers.length; j++) {
    if (numberArray[i] === uniqueNumbers[j]) {
      isDuplicate = true;
      break;
    }
  }

  if (!isDuplicate) {
    uniqueNumbers.push(numberArray[i]);
  }
}

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6, 7, 10, 9]

설명:

• seenIds: 어떤 ID가 발견되었는지 추적하는 객체입니다.
• 효율성: 이 방법은 시간 복잡도가 O(n)이므로 필요한 비교 횟수가 줄어들기 때문에 대규모 데이터세트에 더 적합합니다.

결론

배열의 중복 항목을 처리하는 것은 모든 JavaScript 개발자에게 필수적인 기술입니다. 기본 반복부터 맵이나 개체를 사용한 최적의 솔루션에 이르기까지 이 문서에서 설명한 방법을 사용하면 데이터를 효율적으로 관리하고 애플리케이션이 원활하게 실행되도록 할 수 있습니다.

데이터 구조를 이해하고 올바른 기술을 선택하면 프로젝트의 성능과 유지 관리 가능성을 향상시킬 수 있습니다. 특히 최적의 접근 방식을 사용하면 데이터 세트가 증가함에 따라 중요한 확장성이 가능해집니다.

이 예제를 애플리케이션 요구 사항에 맞게 자유롭게 조정하고 코드베이스를 깔끔하고 효율적으로 유지하세요!

위 내용은 JavaScript 배열의 중복 처리: 기술 및 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!