配列と聞くと、「そんなもんfor文をぶん回しておけ！」と思っていた、ユゲタです。
Javascriptで配列操作をする時に、こんな場面に遭遇した事はないですか？
多重配列の中から、特定の値を抜き出して１つの配列を作ってそれを操作する。
そんな時は、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
