JavaScript For ループ

ループはコードブロックを複数回実行できます。

JavaScriptのループ

コードを実行するたびに異なる値を使用する必要がある場合、ループ（ループ）は非常に便利です。

通常、配列を使用する例に遭遇することがあります：

このように書かないでください：

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

以下のように書くことができます：

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

実際に試してみてください

さまざまなタイプのループ

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

  • for - コードブロックを複数回遍历します
  • for/in - オブジェクトの属性を遍历します
  • while - 指定された条件が true であれば、コードブロックをループします
  • do/while - 指定された条件が true であれば、コードブロックをループします

For ループ

for ループは、ループを作成したい場合によく使用されるツールです。

for ループの構文は以下の通りです：

for (文脈 1; 文脈 2; 文脈 3) {
     実行するコードブロック
}

文脈 1 はループ（コードブロック）の開始前に実行されます。

文脈 2 はループ（コードブロック）の実行条件を定義します。

文脈 3 はループ（コードブロック）が毎回実行された後に実行されます。

インスタンス

for (i = 0; i < 5; i++) {
     text += "数字は " + i + "<br>";
}

実際に試してみてください

上記のコードから、以下のことが分かります：

文脈 1 はループの開始前に変数を設定します（var i = 0）。

文脈 2 はループの実行条件を定義します（i が 5 未満である必要があります）。

文脈 3 はコードブロックが毎回実行された後に値をインクリメントします（i++）。

文脈 1

通常、文脈 1 はループで使用する変数を初期化するために使用されます（i = 0）。

しかし状況は常にそうではありません、JavaScript は気にしません。文脈 1 は任意です。

文脈 1 で複数の値を初期化することができます（カンマで区切ります）：

インスタンス

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

実際に試してみてください

また、文脈 1 を省略することもできます（例えば、ループの開始前に値を設定する場合）：

インスタンス

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

実際に試してみてください

文脈 2

通常、文脈 2 は初期変数の条件を計算するために使用されます。

しかし状況は常にそうではありません、JavaScript は気にしません。文脈 2 も任意です。

文脈 2 が true を返した場合、ループは再開し、false を返した場合、ループは終了します。

文脈 2 を省略した場合、ループ内で提供する必要があります。 breakそれでなければループは決して終わらないでしょう。break についても次の章で詳しく説明します。

文脈 3

通常、文脈 3 は初期変数の値をインクリメントします。

しかし状況は常にそうではありません、JavaScript は気にしません。文脈 3 も任意です。

文脈 3 は何でも行うことができます、例えば負のインクリメント（i--）、正のインクリメント（i = i + 15）、または他のどんなことができます。

ステートメント 3 は省略することもできます（例えば、ループ内でインクリメントする場合）：

インスタンス

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

実際に試してみてください

For/In ループ

JavaScript for/in ステートメントがオブジェクトの属性を巡回します：

インスタンス

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

実際に試してみてください

While ループ

次の章では while ループと do/while ループを学びます。

参考書

さらに詳しい情報については JavaScript for ステートメントの知識について詳しく知りたい場合は、JavaScript 高級チュートリアルの関連内容を読んでください：

ECMAScript イテレーション ステートメント
イテレーション ステートメントはまたループ ステートメントと呼ばれます。このセクションでは、ECMAScript が提供する四种のイテレーション ステートメントを紹介します。