動作環境
Node.js v16.14
Ubuntu20.4 （Vagrant + Windows10）
はじめに
JavaScriptで配列を処理する方法はいくつかあります。色々なパターンを試してみました。テストで利用する配列がこちらです。
var ary = ["aa","bb","cc","dd"];
内容
一番原始的なやり方がことらです。初学者であれば、まずは、このやり方が思いつくかと思います。この書き方でも、全然問題はありません。ただし、エレガントさに欠けるという言い方はできるかと思います。
for (let i = 0; i < ary.length; i++) {
console.log("val=" + ary[i] + " idx=" + i );
}
動作結果です。
val=aa idx=0
val=bb idx=1
val=cc idx=2
val=dd idx=3
上記のfor文をエレガントに書くと、次のようになります。何がエレガントなのかと言えば、ループする条件を記述する必要がありません。これだけで、配列の全ての要素を取得してくれます。この書き方は、ECMAScript 2015以降で追加になった仕様です。随分と以前の話であるため、今となっては、特段、モダンな書き方というわけでもないでしょう。ただし、この書き方では、インディックスを取得することはできません。インディックスを取得したい場合は、i++でループした数をカウントして取得することになります。そんなことをする位なら、上記の書き方の方が逆にシンプルな書き方と言えるかと思います。
for (let val of ary) {
console.log(val);
}
動作結果です。
aa
bb
cc
dd
配列の要素を全て取得する場合、forEach文を使うこともできます。forEach文では、自分でループした数をカウントすることなく、インデックスを取得することができます。ただし、forEach文のブロック内では、breakや、continueが使えないため、正直いってあまり使えないといった印象です。
ary.forEach(function (val, idx) {
console.log("val=" + val + " idx=" + idx);
})
動作結果です。
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はどっちを使っても同じです。
ary.map(function (val, idx) {
console.log("val=" + val + " idx=" + idx);
})
動作結果です。
val=aa idx=0
val=bb idx=1
val=cc idx=2
val=dd idx=3
mapとforEachの違いは、mapには戻り値をセットできるところにあります。つまり、元の配列をループして、加工した結果を、別の新しい配列にセットすることができます。forEachにはこのようなことはできません。この点がforEachとmapの違いです。
let ret = ary.map(function (val, idx) {
return val + " : " + idx;
})
console.log(ret);
動作結果です。
[ 'aa : 0', 'bb : 1', 'cc : 2', 'dd : 3' ]