for、forEach、mapの使い方

動作環境

Node.js v16.14
Ubuntu20.4 （Vagrant + Windows10）

はじめに

JavaScriptで配列を処理する方法はいくつかあります。色々なパターンを試してみました。テストで利用する配列がこちらです。

node.js

var ary = ["aa","bb","cc","dd"];

内容

一番原始的なやり方がことらです。初学者であれば、まずは、このやり方が思いつくかと思います。この書き方でも、全然問題はありません。ただし、エレガントさに欠けるという言い方はできるかと思います。

node.js

for (let i = 0; i < ary.length; i++) {
    console.log("val=" + ary[i] + " idx=" + i );
}

動作結果です。

node.js

val=aa idx=0
val=bb idx=1
val=cc idx=2
val=dd idx=3

上記のfor文をエレガントに書くと、次のようになります。何がエレガントなのかと言えば、ループする条件を記述する必要がありません。これだけで、配列の全ての要素を取得してくれます。この書き方は、ECMAScript 2015以降で追加になった仕様です。随分と以前の話であるため、今となっては、特段、モダンな書き方というわけでもないでしょう。ただし、この書き方では、インディックスを取得することはできません。インディックスを取得したい場合は、i++でループした数をカウントして取得することになります。そんなことをする位なら、上記の書き方の方が逆にシンプルな書き方と言えるかと思います。

node.js

for (let val of ary) {
    console.log(val);
}

動作結果です。

node.js

aa
bb
cc
dd

配列の要素を全て取得する場合、forEach文を使うこともできます。forEach文では、自分でループした数をカウントすることなく、インデックスを取得することができます。ただし、forEach文のブロック内では、breakや、continueが使えないため、正直いってあまり使えないといった印象です。

node.js

ary.forEach(function (val, idx) {
    console.log("val=" + val + " idx=" + idx);
})

動作結果です。

node.js

val=aa idx=0
val=bb idx=1
val=cc idx=2
val=dd idx=3

mapを使って、forEachと同じように、配列の値とインディックスを取得することができます。mapもforEachと同じように、ブロック内で、breakや、continueを使うことができません。下記のmapを使た記述は、上記のforEachを使った記述と同じ結果になります。この結果だけ見れば、mapとforEachはどっちを使っても同じです。

node.js

ary.map(function (val, idx) {
    console.log("val=" + val + " idx=" + idx);
})

動作結果です。

node.js

val=aa idx=0
val=bb idx=1
val=cc idx=2
val=dd idx=3

mapとforEachの違いは、mapには戻り値をセットできるところにあります。つまり、元の配列をループして、加工した結果を、別の新しい配列にセットすることができます。forEachにはこのようなことはできません。この点がforEachとmapの違いです。

node.js

let ret = ary.map(function (val, idx) {
    return val + " : " + idx;
})
console.log(ret);

動作結果です。

node.js

[ 'aa : 0', 'bb : 1', 'cc : 2', 'dd : 3' ]