JavaScriptのfor文

定義と使用法

for文はループを生成し、条件が真である限りそのループを実行します。

条件が真である限り、ループは続行します。条件が偽になるまで停止しません。

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

  • for - 複数回ループするコードブロック
  • for/in - オブジェクトの属性を巡回
  • for/of - 可変オブジェクトの値を巡回します
  • while - 指定された条件が真である場合にループ内のコードブロックを繰り返します
  • do/while - 指定された条件が真である場合にループ内のコードブロックを一度実行し、再びループします

ヒント：ループから抜け出すために break 文言を使用し、ループ内の特定の値をスキップするために continue 文言を使用します。

例

ループコードブロックを 5 回実行します：

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

自分で試してみる

ページの下部にさらに TIY 実例があります。

文法

for (statement 1; statement 2; statement 3) {
  実行されるコードブロック
}

引数の値

引数 説明
statement1

オプション。ループ（コードブロック）の開始前に実行。通常、この文はカウンタ変数の初期化に使用されます。複数の値を初期化する場合は、各値をカンマで区切ります。

コメント：この引数は省略できます。ただし、セミコロン ";" を省略しないでください。
statement2

オプション。ループ（コードブロック）の実行条件を定義。通常、この文はカウンタ変数の条件を評価するために使用されます。true を返す場合、ループは再開し、false を返す場合、ループは終了します。

コメント：この引数は省略できます。ただし、セミコロン ";" を省略しないでください。さらに、この引数を省略するときは、ループ内で break を提供する必要があります。そうしないと、ループは決して終了しません。これにより、ブラウザがクラッシュする可能性があります。
statement3

オプション。ループ（コードブロック）の実行の後実行。通常、この文はカウンタ変数を増加または減少させるために使用されます。

コメント：この引数は省略できます（例えば、ループ内の値を増加/減少）。

技術的詳細

JavaScript 版本： ECMAScript 1

他の例

例

ループは配列のインデックスを巡回し、cars 配列から車の名前を収集します：

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（配列の長さ）より小さくなると、条件が偽になり、ループが終了します

例

最初の引数で複数の値を初期化：

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 文言を使って - ループコードブロックをスキップし、"3" という値を飛ばします：

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

自分で試してみる

例

break文を使用 - ループ内のコードを実行しますが、iが"3"に等しいときにループから退出：

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

自分で試してみる

例

第2引数を省略。この例では、iが"3"に等しいときにbreak文を使ってループから退出（第2引数を省略した場合、ループ内でbreakを提供する必要があります。それしないとループは終わりませんし、ブラウザがクラッシュする可能性があります）：

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 + " ";
  }
}

自分で試してみる

ブラウザのサポート

ステートメント Chrome IE Firefox Safari Opera
for サポート サポート サポート サポート サポート

関連ページ

JavaScript ガイド：JavaScript For ループ

JavaScript リファレンスマニュアル：JavaScript for ... in 文

JavaScript リファレンスマニュアル：JavaScript break 文

JavaScript リファレンスマニュアル：JavaScript continue 文

JavaScript リファレンスマニュアル：JavaScript while 文