最近、連想配列よりも配列で処理するようになった、ユゲタです。
keyでの任意IDで扱える連想配列は、これまで、どの言語でも使える王道のデータ存在確認だったんですが、javascriptで配列検索の機能が便利すぎて最近webブラウザでの処理は配列データのみで処理をした方が楽なことに気が付きました。
という、思考の変遷はどーでもよくて、今回はそんな配列データの中から特定のIDを持つデータを抽出する際に、そのIDが複数ある場合、いわゆる検索IDを配列で持っている場合に、javascriptでカンタンに検索出来る方法を、仕事で使う機会があったので、ブログに備忘録しておきたいと思います。
サンプルデータを用意したので、お好きなデータに書き換えてお試しください。
サンプルデータ
const data = [
{
id : 'a',
num : 123,
str : 'abc',
},
{
id : 'b',
num : 123,
str : 'def',
},
{
id : 'c',
num : 456,
str : 'abc',
},
{
id : 'd',
num : 456,
str : 'def',
},
{
id : 'e',
num : 789,
str : 'abc',
},
]
idの検索の他に、numやstrでも検索できるようなテストデータにしてみました。
SQLデータベースから取得したデータは、大体がこの形式になっていてカラム情報に応じて内容のkeyが変わるだけの事なので、この手のデータ検索は通常よく行われると思います。
検索方法
上記のデータから、idが'a'というデータをひとつだけ取得するには、
data.find(e => e.id === 'a')
> {id: 'a', num: 123, str: 'abc'}
この１行で十分です。
次にnumが123という値のものを配列で取得したい場合は、
data.filter(e => e.num === 123)
> [
> {id: 'a', num: 123, str: 'abc'}
> {id: 'b', num: 123, str: 'def'}
> ]
findをfilterに変えるだけでラクにできます。
さて次に、検索したいidが、b , c , d というように複数ある場合、
または、
search_id_array = ['b' , 'c' , 'd']みたいな配列で検索をしたい場合はどうすればいいでしょう？
search_id_arrayをfor文でまわしてもいいですが、次のように書くとカンタンにできます。
data.filter((e) => search_id_array.indexOf(e.id) !== -1)
> [
> {id: 'b', num: 123, str: 'def'}
> {id: 'c', num: 456, str: 'abc'}
> {id: 'd', num: 456, str: 'def'}
> ]
このようにカンタンに検索することができました。
idなどの一致検索ではなく、文字が含まれているかどうかの検索をしたい場合は、次のようにできます。
data.filter((e) => e.str.match('a'))
> [
> {id: 'a', num: 123, str: 'abc'}
> {id: 'c', num: 456, str: 'abc'}
> {id: 'e', num: 789, str: 'abc'}
> ]
最後に・・・
このfilterという機能、かなり万能に使えるので、使い慣れておいて損はない機能ですね。
ちなみに、次の構文を覚えておくと便利です。
data.filter((elm , index , arr) => console.log(elm , index , arr))
elm : 検索対象のデータが順番に入ります。
index : 順番に検索する現在位置がindex（ゼロスタート）で取得できます。
arr : 全体データが参照できます。
javascriptは今回紹介したfind , filterの他に、sortも似たような感じでコールバックを簡単に掛けて便利に使えるので、オススメです。
ちなみに、findとfilterが分かりにくいと言う人は、少し前に書いたブログ記事もあるので、そちらも見てみてください。
配列の検索をカンタンにする技
