JavaScriptで配列を扱っていると、重複した値を削除したい場面はよくあります。
例えば次のような配列です。
const numbers = [1, 2, 3, 3, 4, 4, 5]この配列から重複を削除して
[1,2,3,4,5]のようにしたい場合です。
従来の書き方
昔はこのように書くことが多かったです。
const numbers = [1,2,3,3,4,4,5]
const unique = numbers.filter((value, index, self) => {
return self.indexOf(value) === index
})
console.log(unique)結果
[1,2,3,4,5]ただしこの書き方は少し分かりにくいです。
モダンJavaScriptの書き方（Set）
現在のJavaScriptでは Set を使う方法が一般的です。
const numbers = [1,2,3,3,4,4,5]
const unique = [...new Set(numbers)]
console.log(unique)結果
[1,2,3,4,5]なぜSetで重複が消えるのか
Setは「同じ値を持つ要素を1つしか持てない」という特徴があります。
例えば
const set = new Set([1,1,2,2,3])
console.log(set)結果
{1,2,3}重複が自動で削除されます。
Set → 配列に戻す
Setは配列ではないためスプレッド構文で配列に戻します。
const unique = [...new Set(array)]この1行で
- 重複削除
- 配列化
ができます。
実務でよくある例
例えばタグ一覧などです。
const tags = [
"javascript",
"css",
"javascript",
"html",
"css"
]
const uniqueTags = [...new Set(tags)]
console.log(uniqueTags)結果
["javascript","css","html"]応用：オブジェクト配列の重複削除
オブジェクト配列の場合はidなどを基準にすることが多いです。
const users = [
{ id: 1, name: "Taro" },
{ id: 2, name: "Hanako" },
{ id: 1, name: "Taro" }
]
const unique = Array.from(
new Map(users.map(user => [user.id, user])).values()
)
console.log(unique)まとめ
配列の重複削除は
const unique = [...new Set(array)]この方法が
- シンプル
- 読みやすい
- 高速
という理由で モダンJavaScriptの定番テクニックになっています。配列操作を行う際にはぜひ覚えておきたいテクニックです。