JavaScriptで配列の重複チェックを超簡単&スマートにやる方法

たとえばJavaScriptで配列を扱っているとき、、、

  • 同じ値を含めたくない、
  • 重複してないか確認したい

、、、みたいな場面がありました。

一番簡単なのは forEach  を使うことですが、あんまりスマートじゃありません。

そこで、JSにおける配列の重複チェックの簡単&スマートなやり方 をいくつか紹介

たぶん重複チェックするだけなら、最初のが一番スマートだと思います。

方法1.Setを使って重複チェックするやり方

その一番スマートなやり方とはコレ

Setオブジェクトを使って重複してるか調べる方法

これ以上に楽に判定できるやり方って(たぶん)ないですね。

 

この Set ですが、ES6 から使えるようになったデータ型です。

▼ MDNでの Set についての説明

Set オブジェクトは値のコレクションです。挿入順に要素を反復することができます。Set に重複する値は格納出来ません。Set 内の値はコレクション内で一意となります。

また、NaN と undefined も Set 内に格納できます。NaN は(NaN !== NaN ですが)NaN と同じと扱われます。

引用元 : https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

Set に重複する値は格納出来ません

この一文さえ見れば、賢い人ならあとはすべて分かるはず

そうです。配列を Set に変換し、元配列と長さ(length)が違えば重複があると分かる という訳です。

 

面白そうなので、早速そのようなコードを書いてみました。

▼ 配列の重複を調べてる関数コード

コードの通り new Set(a)  で Set型に変換し、その長さと元配列長さが等しくないかを返すもの。つまり異なるなら true なので重複してると分かる訳です。

ただし Set では length が常に 0 になるので、size を使うことに要注意

 

実際にこの関数を使った結果は次の通り

▼ まず文字列配列で試してみた

▼ 数値配列でも試してみた

数値の場合は NaN  だけには注意が必要かも

普通は NaN != NaN  になるけど、Set 内では同じものとして扱われてしまいます。
あと undefined  を含むなら、 undefined  同士は異なるものとして認識される模様です。

方法2.重複チェックをforEachでやるやり方も紹介

今紹介した Set のやり方はかなりスマート

でも ES6 以降なので、互換性を気にすると少し使いにくいかもしれません。

▼ ブラウザので対応状況

上ページに対応状況が表に載ってるけど、IEだとほぼ対応してないです。

切り捨てる選択肢もあるけど、日本はいまだにシェア率が高いからそれも難しいですね。

 

そこで forEach で地道に重複チェックする方法も紹介します。

やり方を箇条書きすると次の通り

  1. 配列を forEach  で回す
  2. 現在値の indexOf  の値を取得
  3. 現在値の lastIndexOf  の値を取得
  4. indexOf  と lastIndexOf  の値比較
  5. もし違っていれば重複アリ

こういう感じで重複しているかを ゛地道に゛ チェック可能

 

ちなみにコード例として次みたいな関数を作ってみました。

▼ 具体的な関数例がコチラ

▼ この関数を使って重複チェックしてみた

チャンと期待通りの結果になってます。

ES6が使用できない環境なら、この方法もありかもしれません。

ここまでのまとめ

ということで、一番楽&スマートに配列重複チェックする方法でした。

もし「もっといい方法あるよ」、という方はぜひコメントください。ではまた

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください