0
Help us understand the problem. What are the problem?

posted at

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' ]

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?