JavaScriptで配列を扱う際、重複した値を取り除きたい場面は多々あります。この記事では、簡潔かつ効率的に重複を削除する代表的な2つの方法、Setを使う方法と、filter()とindexOf()を組み合わせる方法を紹介します。
Setを使った重複削除
ES6で導入されたSetオブジェクトは、値の重複を自動的に排除するという特徴があります。この性質を利用すれば、配列の重複を簡単に取り除くことができます。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]Setに配列を渡すことで、内部で重複が排除されます。その後、スプレッド構文で再び配列に展開しています。可読性も高く、最もシンプルな方法と言えるでしょう。
filter()とindexOf()を使った方法
もう少し古い環境や柔軟な処理を行いたい場合には、filter()とindexOf()を組み合わせた方法も有効です。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => {
return self.indexOf(value) === index;
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]このコードでは、配列の各要素について「その値が最初に現れる位置」と「現在のインデックス」を比較しています。一致する場合のみ、その値を配列に残すことで重複を排除しています。
オブジェクト配列の重複削除
オブジェクト配列においては、値そのものではなく特定のキーを基準に重複を排除するケースもあります。
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' }
];
const uniqueUsers = users.filter((user, index, self) => {
return index === self.findIndex(u => u.id === user.id);
});
console.log(uniqueUsers);
// [
// { id: 1, name: 'Alice' },
// { id: 2, name: 'Bob' }
// ]このように、findIndex()を活用することで、特定のキーで重複するオブジェクトを排除できます。
まとめ
配列の重複削除には、Setのように簡潔で高速な手段がある一方、filter()とindexOf()によって柔軟に条件を定義することも可能です。扱う配列の内容や目的に応じて適切な方法を選びましょう。JavaScriptではほんの数行で実装できるため、日々のコーディングでも活用していくと効率が大きく向上します。
