【JavaScript】map、filter、indexを理解する

JavaScriptに限らず、ループ処理を行う際は大体そのプログラムでもfor構文やwhile構文を使うことが多いと思います。ただ、JavaScriptで配列を扱うときは、mapやfilterなどを使ったほうが便利です。

今回はJavaScriptでのmap,filter,indexの使い方についてまとめてみようと思います。

map関数

ある配列に複数の要素が格納されている場合、その要素を取得するときには以下のようなfor文を回すことで要素を取得することができます。

const arrayname =  ["織田信長","豊臣秀吉","徳川家康"]

for(let index = 0; index < arrayname.length;index++){
    console.log(arrayname[index])
}

[Running] node "c:\javascript\main.js"
織田信長
豊臣秀吉
徳川家康

正直for文使うの面倒くさいですよね!!!

そこでmap関数を使うと簡単に配列の要素を取得することができます。

const namearray =  ["織田信長","豊臣秀吉","徳川家康"];
namearray.map((name) =>console.log(name));

アロー関数を使って、配列の要素を一括で取得しています。

filter関数

filter関数はreturnの後に条件を記述して一致したもののみリターンコードで返ってくるというものです。

const namearray =  ["織田信長","豊臣秀吉","徳川家康"];
const namearray2 = namearray.filter((namearray)=>{
    return namearray == "織田信長"
})
console.log(namearray2);

[Running] node "c:\javascript\main.js"
[ '織田信長' ]

配列の中から特定の条件に一致するものを処理しています。
SQLでいうとWHERE文に該当するイメージです。

indexを使う

上述までは、取得した要素が何番目の要素だったのかは意識出ずに取得しています。何番目の要素か？も含め取得したい場合はmap関数の第２引数にindexの情報を格納することができます。

const namearray =  ["織田信長","豊臣秀吉","徳川家康"];

namearray.map((name,index) => console.log(`${index+1}番目:${name}`))

(name,index)の第２引数にindexの情報を格納しています。

[Running] node "c:\javascript\main.js"
1番目:織田信長
2番目:豊臣秀吉
3番目:徳川家康

配列の添え字は0から始まるのでindex +1にして１から添え字が始まるようにしています。

まとめ

• 配列の要素をループさせたいときはmap関数を使う
• 配列の要素から条件に一致した要素を取得するときはfilter関数を使う
• 何番目の要素かが必要場場合は、indexを活用する

配列のループ処理は、ほとんどの場合はfor文は使わずmap関数を使うことがほとんどなので理解しておくべきだと思います。