【JavaScript】連想配列の重複を削除する方法

【JavaScript】連想配列の重複を削除する方法

はじめに

コジマです。

JavsScriptって微妙にかゆいところ手が届かなかったりするんですよね。

連想配列の重複を削除する方法
について書いていこうと思います。

こんな配列があったとします。

適当すぎてごめんねな気持ちもあるけど、英語名と日本語名があります。
赤と緑が重複しているので、それを取り除いた新しい配列を作成していきます。

サンプルソース

早速答えから書いていくとこんな感じ

実行結果

以下のようにして重複を取り除くことができました。

さっくり解説

割とググるとここまでは大体書いてあるんですけど、
じゃあなんでこんな書き方で重複を削除できるのか?って触れてる人が少ないのでそこに触れていきたいと思います。

実装方針について

方針としては、条件に合致する1個目だけ取るようにします。

実際の実装はと言いますと、findIndexが条件を満たす1個目の番号を取得してくるということを利用して、
filterの条件にfindIndexを入れ、自身の配列と現在の要素を突き合わせるということをします。

findIndexで取得したindexと現在のindexが一致したら1個目の一致となるので取得する。
findIndexで取得したindexと現在のindexが一致したら2個目以降の一致となるので取得しない。

結果、重複を削除することができるわけです。

補足

filterなどの配列操作の関数って引数3つ取れるんです。大体2個までしか使わないかなとは思いますが。

element:配列内の現在の要素
index:配列内の現在の要素の番号
self:メソッドを実行する関数

を意味します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
公式ページでは3つ目の引数はarrayと書いていますが、自分自身という意味合いを強めるためあえてselfとしています。(クラスと混同したら申し訳ない)

さいごに

余談なんですが、JavaScriptで簡単に動作を試したい時は
MDNのリファレンス使ってます。
どこでもいいんですけど、今回はfilterのページを使用しました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
findIndexのページも載せときます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
もっと簡単なやり方あったらそっと教えてくだされ。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


javascriptカテゴリの最新記事