• HOME > 
  • JavaScript > 
  • JSで配列の重複チェックを行う【Setオブジェクトを利用】

JSで配列の重複チェックを行う【Setオブジェクトを利用】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

JavaScriptで配列の重複チェックを行うには?

JavaScriptで配列の中に重複する値が存在するか判定したい状況があり、その時に調べたことを備忘録として残しておきます。

方法はいろいろあるようでしたが、今回は単純に重複しているかどうかだけ分かればよかったので、「Setオブジェクト」を使って重複チェックを行う方法を選びました。

重複チェックだけならこの方法が一番シンプルで書きやすいかなと思いました。

Setオブジェクトを使った配列の重複チェックの方法

Setオブジェクト自体については理解しきれていないのですが、現時点で学んだ特徴をまとめると次の通りです(勉強中なので誤りはご容赦ください)。

  • Setオブジェクトとは配列と同じように値を格納できるものである
  • キーを持たず、値のみを格納する
  • 配列と異なり、値の重複を許可しない

今回のテーマである「配列の重複チェック」のために重要なのが3つ目に挙げた「値の重複を許可しない」という特徴です。

配列をSetオブジェクトに変換すると自動的に重複している値は削除されるので、元の配列の長さとSetに変換した後の長さを比較して、差異があれば重複が存在するということが導き出せます。

配列をSetオブジェクトに変換する

配列を以下のようにSetオブジェクトの引数に入れるだけで変換できます(同時に重複する値があれば削除されます)。

配列をSetオブジェクトに変換する

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の配列の重複チェックを行う方法です。

専用のメソッドはないものの、重複判定するだけなら比較的簡単にできるということがわかりました。

広告
広告

関連する記事

サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。
サムネイル

【数値のゼロ埋め】JSのpadStart(padEnd)メソ……

2024年09月04日
JavaScriptのpadStartは対象の文字列が任意の桁数になるまで、その先頭から指定した文字で文字埋めを実行するメソッドです。第一引数に最終的な桁数、第二引数に埋める文字を指定します。
サムネイル

JSのsetIntervalで一定時間ごとに繰り返し処理を実……

2024年08月01日
JSのsetIntervalとは? 業務においてJavaScriptを使って一定時間おきに繰り返し処理を実行させたい場面があり、これまで大まかにしか理解していな […]
サムネイル

JSのsetTimeoutで指定した時間後に処理を実行させる……

2024年08月01日
setTimeout()は、指定した時間が経過したら処理を一度だけ実行するといったタイマーのような設定ができる関数です。一定間隔で処理を繰り返すsetIntervalと異なり、処理が一回しか実行されない点が特徴です。停止させる場合はclearTimeoutを使います。
サムネイル

JSでセレクト値が変更されたらフォームを送信を実行する方法【……

2024年07月02日
ユーザーがセレクトボックスの値を変更したタイミングでフォームの送信を実行するという処理を実装する機会があったので、その方法を備忘録として残しておきます。