![カテゴリー記事のアイキャッチ画像](https://web.skipjack.tokyo/wp-content/uploads/eyecatch/eyecatch_javascript.png)
JavaScriptで配列の重複チェックを行うには?
JavaScriptで配列の中に重複する値が存在するか判定したい状況があり、その時に調べたことを備忘録として残しておきます。
方法はいろいろあるようでしたが、今回は単純に重複しているかどうかだけ分かればよかったので、「Setオブジェクト」を使って重複チェックを行う方法を選びました。
重複チェックだけならこの方法が一番シンプルで書きやすいかなと思いました。
Setオブジェクトを使った配列の重複チェックの方法
Setオブジェクト自体については理解しきれていないのですが、現時点で学んだ特徴をまとめると次の通りです(勉強中なので誤りはご容赦ください)。
- Setオブジェクトとは配列と同じように値を格納できるものである
- キーを持たず、値のみを格納する
- 配列と異なり、値の重複を許可しない
今回のテーマである「配列の重複チェック」のために重要なのが3つ目に挙げた「値の重複を許可しない」という特徴です。
配列をSetオブジェクトに変換すると自動的に重複している値は削除されるので、元の配列の長さとSetに変換した後の長さを比較して、差異があれば重複が存在するということが導き出せます。
配列をSetオブジェクトに変換する
配列を以下のようにSetオブジェクトの引数に入れるだけで変換できます(同時に重複する値があれば削除されます)。
![配列をSetオブジェクトに変換する](https://web.skipjack.tokyo/wp-content/uploads/javascript/array-check-unique/kakikata_set.png)
Setを使った配列の重複判定の例
下のコードは、Setを使って配列の重複を判定し、重複の有無によって条件分岐を行うサンプルです。
JavaScript
/*調べたい配列*/ var arr = ['apple','orange','lemon','apple']; console.log(arr);//(4)['apple', 'orange', 'lemon', 'apple'] /*Setに変換*/ var arrSet = new Set(arr); console.log(arrSet);//Set(3){'apple', 'orange', 'lemon'} if(arr.length != arrSet.size){ console.log('重複している値があります。'); }else{ console.log('重複している値はありません。'); } //結果⇒「重複している値があります。」
上記のコードを説明すると…
6行目配列をSetオブジェクトに変換しています。コンソールで確認すると重複している「apple」が1つだけになっていることがわかります。
9行目元の配列の値の数と変換したSetオブジェクトの値の数が一致するかどうかで条件分岐を作成しています。
配列はlengthで値の数(長さ)を取得しますが、Setオブジェクトの方は「size」で取得するというという点がポイントです。
まとめ
以上が、Setオブジェクトを使ってJavaScriptの配列の重複チェックを行う方法です。
専用のメソッドはないものの、重複判定するだけなら比較的簡単にできるということがわかりました。