【JavaScript】連想配列の重複を削除する方法 │ コジマノテック

1. はじめに
2. サンプルソース
- 2.1. 実行結果
3. さっくり解説
- 3.1. 実装方針について
- 3.2. 補足
4. さいごに

はじめに

コジマです。

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  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));

// 色の配列を定義

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": "黄色"
  }
]"

> "[

{

"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個までしか使わないかなとは思いますが。

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

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

以上、コジマでした。