[Javascript] 配列を扱う時にmapとfilterを使いこなせ!

2022年4月7日

Javascript テクノロジー

eyecatch 配列と聞くと、「そんなもんfor文をぶん回しておけ!」と思っていた、ユゲタです。 Javascriptで配列操作をする時に、こんな場面に遭遇した事はないですか?
多重配列の中から、特定の値を抜き出して1つの配列を作ってそれを操作する。
そんな時は、mapメソッド使っとけっていう事ですよ。

サンプルデータ

例えば次のような配列があったとします。 var datas = [ { "name" : "山田", "group" : "A", "program" : "Javascript" }, { "name" : "田中", "group" : "B", "program" : "PHP" }, { "name" : "佐藤", "group" : "A", "program" : "React" }, { "name" : "加藤", "group" : "C", "program" : "shell" }, { "name" : "工藤", "group" : "B", "program" : "Ruby" }, { "name" : "武藤", "group" : "C", "program" : "Awk" }, ]

for文でのデータ抜き出し処理

それぞれの名前と、分けられたグループ、得意なプログラム言語などのリストですが、この中から、名前を抜き出した一覧を作りたい時、通常は、for文を使って、次のように書きます。 const newDatas = []; for(let i=0; i<datas.length; i++){ newDatas.push(datas[i].name) } console.log(newDatas); > ['山田', '田中', '佐藤', '加藤', '工藤', '武藤']

mapメソッドを使ったデータ抜き出し処理

これでも確実に処理できて問題ないんですが、これをmapメソッドを使うと次のように書くことができます。 const newDatas = datas.map(data=>{return data.name}) console.log(newDatas); > ['山田', '田中', '佐藤', '加藤', '工藤', '武藤'] え?これだけ?と思った人、そうなんです、mapメソッド使うと長ったらしいfor文を一括で処理してしまうことができるんです。

特定の値だけを抜き出したい時はfilterメソッド

mapは、配列の要素数は変えられません。 Aグループだけを抜き出して別のデータを作りたい時は、filterメソッドを使います。 mapとの取得後のデータの違いを理解してみましょう。 datas.map(data=>{return data.group === 'A' ? data : null}) > [ > {name: '山田', group: 'A', program: 'Javascript'}, > null, > {name: '佐藤', group: 'A', program: 'React'}, > null, > null, > null > ] datas.filter(data=>{return data.group === 'A' ? data : null}) > [ > {name: '山田', group: 'A', program: 'Javascript'}, > {name: '佐藤', group: 'A', program: 'React'} > ] 条件部分は、mapと全く同じ書き方ですが、emptyやnull、undefinedなどが配列に適用されない結果になります。 注意点としては、filter機能は、0やfalseも、書き出されないいわゆるif文での!(エクスクラメーション)の判定されるモノが、除外されてしまうので、object型など、確実に値の有無が明確な場合に使うようにしましょう。

最後に

JavascriptのArrayメソッドは、mapやfilter以外に、たくさん存在するので、一度じっくりとみておくと、効率のいいプログラミング作成に役立つことは間違い無いですよ。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/ こちらに、Arrayメソッドの一覧がサンプルコードも一緒に掲載されているので、Javascriptプログラミングをコーディングする人は、是非みておくことをオススメします。 ちなみに、このmapとfilter機能は、InternetExplorerでも、正常に動作します。安心してお使いください。 え?IEもう使わないって、それも懸命ですwww

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。