【初学者向け】JavaScriptの『forEach / for of / for in』のまとめ

配列を使い
-for文
-for in
-for of
-forEach
の違いをまとめてみました。

事前準備

①まずはこのような配列を用意します。(添字と混ざらないように奇数にしてます。)

const arry = [1, 3, 5, 7, 9];

②変数名は自由につけることが可能ですが、

[for文/for in] の場合は
iを使用(※index(添字)の意味がある）

[for of] の場合は
vを使用(※value(値)の意味がある)

しています。

①『for文』だと

for(let i = 0; i < arry.length; i++) {
    console.log(i);         //0 1 2 3 4   (インデックス取得)
    console.log(arry[i]);   //1 3 5 7 9   (インデックスを使って配列の値を取得)
}

②『for in』だと

point: indexが取得できる。ひと手間いるが値が取得できる

for(let i in arry) {
    console.log(i);          //0 1 2 3 4   (インデックス取得)  
    console.log(arry[i]);    //1 3 5 7 9   (for文同様この形で値取得)
}

③『for of』だと

point: 値が簡単に取得できる。対応していないブラウザがある。

for(let v of arry) {
    console.log(v);          //1 3 5 7 9    (すぐに値を取得)
}

④『forEach』

point:変数の定義がないのでスッキリ記述できる。引数を3つ取れる。

arry.forEach((v, i, arry) => {
   console.log(v);                 //1 3 5 7 9
   console.log(i);                 //0 1 2 3 4
   console.log(arry);              //[1, 3, 5, 7, 9] [1, 3, 5, 7, 9] [1, 3, 5, 7, 9] [1, 3, 5, 7, 9] [1, 3, 5, 7, 9]
 })

まとめ

慣れるまではfor文からfor in を使うのがいいのかなと感じます。
慣れてきたらforEachがおすすめです。