JavaScript: for文を使った配列のループ方法

JavaScriptでfor文を使って配列をループする方法はいくつかあります。以下に主な方法を紹介します。

1. 従来のfor文

最も基本的な方法です。インデックスを使って配列の要素にアクセスします。

const array = ['apple', 'banana', 'cherry'];

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

2. for...of文

ES6で導入された構文で、配列の要素を直接取得できます。

const array = ['apple', 'banana', 'cherry'];

for (let item of array) {
    console.log(item);
}

3. for...in文

オブジェクトのプロパティを列挙するために設計されていますが、配列にも使用できます。ただし、配列の場合は通常for...ofの方が適しています。

const array = ['apple', 'banana', 'cherry'];

for (let index in array) {
    console.log(array[index]);
}

4. Array.forEach()メソッド

厳密にはfor文ではありませんが、配列をループする一般的な方法です。

const array = ['apple', 'banana', 'cherry'];

array.forEach((item, index) => {
    console.log(item, index);
});

各方法の特徴と使い分け

  • 従来のfor文:
    • インデックスが必要な場合に便利
    • ループを途中で終了させたい場合（break文を使用）に適している
  • for...of文:
    • シンプルで読みやすい
    • 配列の要素だけが必要な場合に最適
    • ループを途中で終了させることができる（break文を使用可能）
  • for...in文:
    • オブジェクトのプロパティをループする場合に主に使用
    • 配列のインデックスが文字列として返される
    • プロトタイプチェーン上の列挙可能なプロパティも含まれるため、配列には通常使用しない
  • Array.forEach():
    • 関数型プログラミングのスタイルに適している
    • コールバック関数を使用するため、より複雑な処理を行いやすい
    • ループを途中で終了させることはできない（break文は使用不可）

実際の使用ケースや個人の好みに応じて、適切な方法を選択してください。多くの場合、for...of文やArray.forEach()メソッドが読みやすく、使いやすいオプションとなります。

JavaScript入門