はじめに
コジマです。
JavsScriptって微妙にかゆいところ手が届かなかったりするんですよね。
連想配列の重複を削除する方法
について書いていこうと思います。
こんな配列があったとします。
1 2 3 4 5 6 7 8 9 |
const colors = [ {english: 'red' , japanese: '赤'}, {english: 'blue' , japanese: '青'}, {english: 'green' , japanese: '緑'}, {english: 'yellow' , japanese: '黄色'}, {english: 'red' , japanese: '赤'}, {english: 'green' , japanese: '緑'}, {english: 'red' , japanese: '赤'} ]; |
適当すぎてごめんねな気持ちもあるけど、英語名と日本語名があります。
赤と緑が重複しているので、それを取り除いた新しい配列を作成していきます。
サンプルソース
早速答えから書いていくとこんな感じ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 色の配列を定義 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)); |
実行結果
以下のようにして重複を取り除くことができました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
> "[ { "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個までしか使わないかなとは思いますが。
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)を
フォローしてくれたらうれしいです!
以上、コジマでした。