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

はじめに
●JavaScriptで配列から重複を排除する方法とは
- ○重複排除の基本
●5つの方法とサンプルコード
●応用例とサンプルコード
- ○応用例1：重複要素をカウントする
- ○応用例2：オブジェクトの配列から重複を排除する
●注意点と対処法
- ○パフォーマンス
- ○オブジェクトの比較
まとめ

はじめに

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

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

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

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

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

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

○重複排除の基本

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

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

Setオブジェクトを使う
filterメソッドを使う
reduceメソッドを使う
forEachメソッドを使う
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" },
// ]