最新のWeb開発のチュートリアル
 

JavaScript声明のために

<JavaScriptステートメントリファレンス

コードのブロック5回ループスルー:

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

テキストの結果は次のようになります。

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。


定義と使用法

文の条件がtrueである限り実行されたループを作成します。

ループは、条件が真である限り実行し続けます。 条件が偽になったときにのみ停止します。

JavaScriptは、ループの異なる種類をサポートしています。

  • for -コードのブロックをループ回数
  • for/in -オブジェクトのプロパティをループ
  • while -指定した条件が真である間、コードのブロックをループ
  • DO /つつ -一度コードのブロックをループし、次に指定された条件が真である間ループを繰り返します

ヒント:使用ブレークループから抜け出すために文を、そして継続ループで値をスキップする声明。


ブラウザのサポート

ステートメント
for はい はい はい はい はい

構文

パラメータ値
パラメーター 説明
statement1 任意。 ループの前に実行される(the code block)開始されます。 通常、この文はカウンタ変数を初期化するために使用されます。 複数の値を開始するために、カンマで各値を区切ります。

注意:このパラメータは省略することができます。 ただし、セミコロンを省略しないでください";"
statement2 任意。 ループ実行条件定義(the code block) 。 通常、この文はカウンタ変数の状態を評価するために使用されます。 それがtrueを返す場合、ループはそれがfalseを返した場合、ループは終了し、もう一度やり直すます。

注意:このパラメータは省略することができます。 ただし、セミコロンを省略しないでください";" 。 このパラメータを省略した場合も、あなたは、ループ内の休憩を提供しなければなりません。 それ以外の場合はループは、ブラウザをクラッシュされる、終わることは決してありません
statement3 任意。 ループ(コードブロック)が実行された後に毎回実行されます。 通常、この文はカウンタ変数をインクリメントまたはデクリメントするために使用されます。

注:このパラメータは省略することができる(eg to increase/decrease values inside the loop)

技術的な詳細

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;)
  • その後、我々は実行するループのための条件を定義します。 限り変数は、配列の長さ未満であるように(which is 4)ループが継続されます
  • ループが実行されるたびに、変数が1だけインクリメントされ(i++)
  • 変数がもはや4未満になったら(array's length) 、条件が偽でなく、ループが終了します

最初のパラメータに複数の値を開始します。

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
    text += cars[i] + "<br>";
}
»それを自分で試してみてください

最初のパラメータを省略(set values before the loop starts)

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
    text += cars[i] + "<br>";
}
»それを自分で試してみてください

コードのブロックをループしますが、値スキップ- continue文を使用した"3"

var text = ""
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        continue;
    }
    text += "The number is " + i + "<br>";
}
»それを自分で試してみてください

コードのブロックをループしますが、変数iが等しい場合にループを終了- break文を使用して"3"

var text = ""
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        break;
    }
    text += "The number is " + i + "<br>";
}
»それを自分で試してみてください

二番目のパラメータを省略します。 この例では、我々はまた、使用ブレーク二番目のパラメータが省略された場合、私は「3」(に等しい、あなたがループ内の休憩を提供しなければならないとき、ループを終了する声明を。そうでなければ、ループを終了することはありません、そして、あなたのブラウザがしますクラッシュ):

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";
}
»それを自分で試してみてください

ネストされたループの例(a loop inside a loop)

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のための...ステートメントで

JavaScriptのリファレンス: JavaScriptのブレークステートメント

JavaScriptのリファレンス: JavaScriptが声明を続けます

JavaScriptのリファレンス: JavaScriptのwhile文


<JavaScriptステートメントリファレンス