JavaScript 配列内の重複の処理: テクニックとベスト プラクティス

JavaScript 開発では、データを効率的に管理することが重要です。開発者が直面する一般的な課題の 1 つは、配列内の重複値の処理です。この記事では、単純な配列とオブジェクトの配列の両方に焦点を当てて、重複を特定して削除するためのさまざまな方法を検討します。

配列内の重複について理解する

配列を操作する場合、重複があると、アプリケーションで不正確な結果、非効率な処理、または予期しない動作が発生する可能性があります。したがって、重複を効果的に除外するための堅牢な戦略を実装することが不可欠です。

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 に設定し、内部ループから抜け出します。
• 条件: 要素が重複していない場合、uniqueNumbers に追加されます。

このアプローチは機能しますが、時間計算量が 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 中国語 Web サイトの他の関連記事を参照してください。