技術系

（Javascript）連想配列から重複要素を削除する方法

重複削除

今回はJavascriptの連想配列において重複する要素を削除する方法について書いていきたいと思います。
重複してしまう要因としてはさまざまあるかと思いますが、私の場合はajaxでPHPにDB検索を投げて帰ってきた結果に対して重複を削除するというユースケースで使いました。

サンプル配列

nameとageをキー値として持つ、以下の配列membersをサンプルとします。

// 配列を定義
const  members = [
  {name: 'TANAKA' , age: '19'},
  {name: 'SAITO' , age: '19'},
  {name: 'YAMADA' , age: '23'},
  {name: 'KIMURA' , age: '36'},
  {name: 'HIRAYAMA' , age: '36'},
  {name: 'TAKEDA' , age: '42'},
  {name: 'OGURA' , age: '５６'}
];

ここから重複している年齢（19歳と36歳）の人は片方を取り除いて、配列内に特定の年齢の人は１人しかいないようにしたいと思います。

ソースコード

以下のようにすると重複を取り除いた新しい配列を作成できます。

// 重複を取り除いた新しい配列resultを作成
const result = members.filter((element, index, array) => 
                            array.findIndex(e => 
                                           e.age === element.age
                                          ) === index
                            );

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

結果

以下の通り、年齢が重複している要素を取り除くことができました。

> '[
  {
    "name": "TANAKA",
    "age": "19"
  },
  {
    "name": "YAMADA",
    "age": "23"
  },
  {
    "name": "KIMURA",
    "age": "36"
  },
  {
    "name": "TAKEDA",
    "age": "42"
  },
  {
    "name": "OGURA",
    "age": "５６"
  }
]'

解説

ここからは処理の解説になります。

先ほどの処理では何をしているかというと、filter関数を使って連想配列の要素を回し、同じ連想配列自身の要素のうち条件に合致する１個目の要素だけを取り出しています。
findIndex関数は条件に合致する１個目の要素を取得してくるので、filterの条件としてfindIndexを入れることで、findindexが取得した要素で新たな配列を作成することができます。
（結果を見てみると分かるとおり、年齢が重複していた要素のうちインデックスが早い要素が残っていてインデックスが遅かった方は削除されています。）

以上により、連想配列から重複を削除することができるわけです。

filter関数とfindindex関数はとても便利なので、これを機にぜひ覚えておくと良いと思います。

-技術系
-