【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)を
フォローしてくれたらうれしいです！

以上、コジマでした。