JavaScriptで重複を排除する5つの方法

JavaScriptで配列から重複要素を排除する方法JS
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで配列から重複を排除する方法を5つ学ぶことができるようになります。

サンプルコード付きで、初心者でも理解しやすくなっています。

また、応用例も紹介しているので、より実践的な使い方も身につけられます。

●JavaScriptで配列から重複を排除する方法とは

JavaScriptで配列から重複要素を排除する方法は、データ整理や集計処理などで非常に便利です。

特に、大量のデータを扱う際には、重複を削除することでデータの正確性を向上させることができます。

○重複排除の基本

JavaScriptでは、配列から重複を排除するために、いくつかの方法があります。

この記事では、次の5つの方法を紹介します。

  1. Setオブジェクトを使う
  2. filterメソッドを使う
  3. reduceメソッドを使う
  4. forEachメソッドを使う
  5. for文を使う

これらの方法を使って、配列から重複要素を簡単に排除することができます。

●5つの方法とサンプルコード

それでは、JavaScriptで配列から重複を排除する5つの方法を、サンプルコードとともに紹介します。

○方法1:Setオブジェクトを使う

このコードでは、Setオブジェクトを使って配列から重複要素を排除する方法を紹介しています。

この例では、まず新しいSetオブジェクトを作成し、その後Array.fromメソッドで配列に戻しています。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(array));
console.log(uniqueArray); // [1, 2, 3, 4, 5]

○方法2:filterメソッドを使う

このコードでは、filterメソッドを使って配列から重複要素を排除する方法を紹介しています。

この例では、filterメソッドを使って、配列の各要素について、それが初めて登場する位置と現在の位置が一致する場合にのみ新しい配列に含めています。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

○方法3:reduceメソッドを使う

このコードでは、reduceメソッドを使って配列から重複要素を排除する方法を紹介しています。

この例では、reduceメソッドを使って新しい配列を作成し、各要素が新しい配列に含まれていない場合にのみ追加しています。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

○方法4:forEachメソッドを使う

このコードでは、forEachメソッドを使って配列から重複要素を排除する方法を紹介しています。

この例では、forEachメソッドを使って配列の各要素を処理し、新しい配列に含まれていない場合にのみ追加しています。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [];
array.forEach((value) => {
  if (!uniqueArray.includes(value)) {
    uniqueArray.push(value);
  }
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]

○方法5:for文を使う

このコードでは、for文を使って配列から重複要素を排除する方法を紹介しています。

この例では、for文を使って配列の各要素を処理し、新しい配列に含まれていない場合にのみ追加しています。

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
  if (!uniqueArray.includes(array[i])) {
    uniqueArray.push(array[i]);
  }
}
console.log(uniqueArray); // [1, 2, 3, 4, 5]

●応用例とサンプルコード

○応用例1:重複要素をカウントする

このコードでは、重複要素をカウントする方法を紹介しています。

この例では、reduceメソッドを使ってオブジェクトを作成し、各要素の出現回数をカウントしています。

const array = [1, 2, 3, 3, 4, 4, 5];
const countDuplicates = array.reduce((accumulator, currentValue) => {
  accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
  return accumulator;
}, {});
console.log(countDuplicates); // {1: 1, 2: 1, 3: 2, 4: 2, 5: 1}

○応用例2:オブジェクトの配列から重複を排除する

このコードでは、オブジェクトの配列から特定のプロパティを基準に重複要素を排除する方法を紹介しています。

この例では、JSON.stringifyとJSON.parseを使ってオブジェクトのプロパティを比較し、重複を排除しています。

const objectArray = [
  { id: 1, name: "A" },
  { id: 2, name: "B" },
  { id: 1, name: "A" },
  { id: 3, name: "C" },
  { id: 2, name: "B" },
];

const uniqueObjectArray = Array.from(
  new Map(
    objectArray.map((item) => [JSON.stringify(item), item])
  ).values()
);

console.log(uniqueObjectArray);
// [
//   { id: 1, name: "A" },
//   { id: 2, name: "B" },
//   { id: 3, name: "C" },
// ]

●注意点と対処法

JavaScriptで配列から重複要素を排除する際には、いくつかの注意点があります。

パフォーマンス

データ量が大きい場合、処理速度が遅くなる可能性があるため、効率的な方法を選ぶことが重要です。

例えば、Setオブジェクトを使った方法は、パフォーマンスが良いことが多いです。

オブジェクトの比較

オブジェクトの配列から重複要素を排除する場合、オブジェクトの比較方法に注意が必要です。

JSON.stringifyを使った方法は、プロパティの順序が異なる場合には正しく重複を検出できないことがあります。

そのような場合は、他の方法を検討する必要があります。

まとめ

JavaScriptで配列から重複要素を排除する方法はいくつかあり、それぞれに特徴があります。

この記事では、5つの基本的な方法と2つの応用例を紹介しました。

これらの方法を理解し、適切な方法を選択して、効率的に重複要素を排除することができるようになりましょう。