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

はじめに

コジマです。

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

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

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

const  colors = [
  {english: 'red' , japanese: '赤'},
  {english: 'blue' , japanese: '青'},
  {english: 'green' , japanese: '緑'},
  {english: 'yellow' , japanese: '黄色'},
  {english: 'red' , japanese: '赤'},
  {english: 'green' , japanese: '緑'},
  {english: 'red' , japanese: '赤'}
];

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

サンプルソース

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

// 色の配列を定義
const  colors = [
  {english: 'red' , japanese: '赤'},
  {english: 'blue' , japanese: '青'},
  {english: 'green' , japanese: '緑'},
  {english: 'yellow' , japanese: '黄色'},
  {english: 'red' , japanese: '赤'},
  {english: 'green' , japanese: '緑'},
  {english: 'red' , japanese: '赤'}
];

// 重複を取り除く処理
const result = colors.filter((element, index, self) => 
                            self.findIndex(e => 
                                           e.english === element.english &&
                                           e.japanese === element.japanese
                                          ) === index
                            );

// 結果を出力
console.log(JSON.stringify(result, null, 2));

実行結果

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

> "[
  {
    "english": "red",
    "japanese": "赤"
  },
  {
    "english": "blue",
    "japanese": "青"
  },
  {
    "english": "green",
    "japanese": "緑"
  },
  {
    "english": "yellow",
    "japanese": "黄色"
  }
]"

さっくり解説

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

実装方針について

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

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

findIndexで取得したindexと現在のindexが一致したら1個目の一致となるので取得する。
findIndexで取得したindexと現在のindexが一致したら2個目以降の一致となるので取得しない。
結果、重複を削除することができるわけです。

補足

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

を意味します。

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
ｆｉｎｄＩｎｄｅｘのページも載せときます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
もっと簡単なやり方あったらそっと教えてくだされ。

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

もっと学びたい人はこちら

JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！

JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム

気になった人はぜひ見てみてくださいね！

以上、コジマでした。