配列要素をループ処理（JavaScript）

こんにちは。

配列の要素をループ処理する方法を調べました¹。

そのまま for of ループさせる

for (const e of arr) {
  console.log(e);
}

インデックスで for ループさせる

for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

• なお下記（for in ループ）もインデックスでループさせていますが使用上注意が必要とのことです。

for (const i in arr) {
  console.log(i, arr[i]);
}

全要素を処理（ループではない）

arr.forEach((e, i) => 
  console.log(i, e)
);

forEach と map がこのタイプです。breakできません。callbak 関数の第二引数で index が得られます。

Object.entries() を介して for of ループ

for (const [i, e] of Object.entries(arr)) {
  console.log(i, e);
}

• Object.entries() は [key, value] を要素とする配列を作ります。したがって配列を与えれば[index, element]を要素とする配列を作ります。

Array.prototype.entries() を介して for of ループ

for (const [i, e] of arr.entries()) {
  console.log(i, e);
}

• Array.prototype.entries() から得たイテレータを for of ループさせています。

1. 参考：「JavaScript の Array 処理はどれが速いのか？ (2021 年 12 月)」、「JavaScriptのfor速度比較が意外な結果だったのでシェアしてみる」、「2019年版: JavaScriptのループの考察」、「JavaScript で forEach を使うのは最終手段」、「for ... of 文でインデックス(index)の値を使う方法」 ↩