JavaScript for文

JavaScript 语句参考手册JavaScript 文リファレンス

例

コードブロックを5回ループ：

var text = "";
var i;
for (i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
}

text出力結果は次のとおりです：

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

試してみる »

この記事の下部には、さらに多くの例が含まれています。

定義と用法

for 文は、判定条件が true である限り実行され続けます。

条件が true である間はループが実行され続け、false になると終了します。

for ループは、ループを作成したいときによく使われるツールです。

JavaScript はさまざまな種類のループをサポートしています：

  • for - コードブロックを一定回数ループする
  • for/in - オブジェクトのプロパティをループして走査する
  • while - 指定した条件が true の場合、指定したコードブロックをループする
  • do/while- 同様に、指定した条件が true の場合、指定したコードブロックをループする

ヒント：ループを抜けるにはbreak文を使用し、continue文を使用して現在の反復をスキップし、次の反復を実行します。

ブラウザー対応

文
for Yes Yes Yes Yes Yes

構文

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

パラメータ値

パラメータ 説明
statement1 省略可能。ループの前に実行され、変数の初期化に使用します。複数の変数を初期化する場合はカンマ(,)で区切ります。

注意：このパラメータは省略できます。ただし、セミコロン「;」を省略しないでください。
statement2 省略可能。ループを実行する条件を定義します。通常、この文は条件判断に使用されます。条件が true の場合ループは続行し、false の場合ループは終了します。

注意：このパラメータは省略できます。ただし、セミコロン「;」を省略しないでください。同様に、このパラメータを省略した場合は、ループ内にループを抜ける条件を記述する必要があります。そうしないと、無限ループになりブラウザーがクラッシュします。
statement3 省略可能。各ループの後にこの文を実行します。通常、この文はカウンタ変数のインクリメントまたはデクリメントに使用されます。

注意：このパラメータは省略できます（例：ループ内でインクリメントまたはデクリメントを操作する場合）。

技術詳細

JavaScript バージョン： 1.0

实例

その他の例

例

配列のインデックスをループして車名を出力します：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}

試してみる »

上記の例の説明：

  • まず、ループの開始前に変数を設定します（var i = 0;）。
  • 次に、ループを実行する条件を定義します。変数の値が配列の長さ（長さは 4）より小さい間、ループは実行され続けます。
  • ループが実行されるたびに、変数は 1 ずつ増加します（i++）。
  • 変数が 4（配列の長さ）より小さくなければ、条件は false となり、ループを終了します。

例

最初のパラメータで複数の値を初期化します：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
    text += cars[i] + "<br>";
}

試してみる »

例

最初のパラメータを省略（ループの前に値を設定）：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
    text += cars[i] + "<br>";
}

試してみる »

例

continue 文を使用 - コードブロックをループしますが、i が "3" のときのループはスキップします：

var text = ""
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        continue;
    }
    text += "The number is " + i + "<br>";
}

試してみる »

例

break 文を使用 - コードブロックをループしますが、変数 i が "3" のときにループを終了します：

var text = ""
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        break;
    }
    text += "The number is " + i + "<br>";
}

試してみる »

例:

2番目のパラメータを省略します。この例では、同様にbreak文を使用して i が "3" のときにループを終了します（2番目のパラメータを省略した場合は、ループ内にループを抜ける条件を設定する必要があります。そうしないと、ループが終了せずブラウザーがクラッシュします）：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
    if (i == 3) {
        break;
    }
    text += cars[i] + "<br>";
}

試してみる »

例

配列のインデックスを降順でループします：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
    text += cars[i] + "<br>";
}

試してみる »

例

最後のパラメータを省略し、ループ内で値をインクリメントします：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
for (; i < len;) {
    text += cars[i] + "<br>";
    i++;
}

試してみる »

例

NodeList オブジェクトのノードをループし、リスト内のすべての <p> 要素の背景色を変更します：

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

試してみる »

例

ネストされたループの例：

var text = "";
var i, j;

for (i = 0; i < 3; i++) {
    text += "<br>" + "i = " + i + ", j = ";

    for (j = 10; j < 15; j++) {
        document.getElementById("demo").innerHTML = text += j + " ";
    }
}

試してみる »

関連ページ

JavaScript チュートリアル：JavaScript for ループ

JavaScript リファレンス：JavaScript for...in 文

JavaScript リファレンス：JavaScript break 文

JavaScript リファレンス：JavaScript continue 文

JavaScript リファレンス：JavaScript while 文

JavaScript 语句参考手册JavaScript 文リファレンス その他の拡張