JavaScript (TypeScript )で、
配列内の重複した要素を削除する方法をご紹介します！
方法はいくつか存在しますが、
よく使われる方法とそれぞれの特徴について説明します！
Setオブジェクトを使用する
Setオブジェクトは、重複を自動的に削除してくれるため、
最も簡単かつ高速な方法です。Setは、配列内のすべての要素を一意な値に変換してくれます。
const array = [1, 2, 3, 3, 1, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4]
特徴:
- 利便性
一行で重複を削除でき、コードが非常にシンプル。 - 速度
Setは大規模なデータセットでもパフォーマンスが良く、
重複削除において最も効率的です
filterメソッドとindexOfを組み合わせる
filterメソッドを使って、
要素が最初に登場した位置だけを残す方法です。
const array = [1, 2, 3, 3, 1, 4];
const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index);
console.log(uniqueArray); // [1, 2, 3, 4]
特徴:
- 理解しやすさ
基本的なJavaScriptのメソッドであるため、
初心者にもわかりやすい。 - パフォーマンス
要素数が増えると処理速度が低下するため、
大規模なデータには適していない。
reduceを使用する
reduceメソッドを使って、
配列を走査しながら重複を取り除く方法です。
const array = [1, 2, 3, 3, 1, 4];
const uniqueArray = array.reduce((acc, current) => {
if (!acc.includes(current)) acc.push(current);
return acc;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4]
特徴:
- 柔軟性
他の処理と組み合わせやすく、柔軟に使用できます。 - パフォーマンス
includesメソッドを使用するため、
大量のデータではパフォーマンスが低下します。
まとめ
本記事では、
JavaScriptで配列の重複を削除する方法を紹介しました！
最もシンプルで高速なのはSetオブジェクトを使う方法で、
配列内の重複を簡単に取り除くことができます。
一方、filterやreduceも柔軟に使えるため、
小規模なデータセットや特定の条件での処理が
必要な場合に役立ちます。
JavaScriptで配列の重複を削除する際は、
データ量や処理速度を考慮し、用途に応じて
適切な方法を選んでください！
以上、誰かの参考になれば！
