for文は括弧で囲まれ、セミコロンで区切られた、3つの任意の式から構成され、その後に繰り返し文が続きます。

文法

for ([初期化]; [条件]; [各繰り返しの最後に実行される式])
処理文

[初期化]

式(割り当ての式を含む)、または変数定義を指定します。 一般的には、カウンタ変数の初期化に使用されます。 この式は、任意にvarキーワードを使用して新しい変数を宣言することも可能です。 これらの変数は繰り返しのローカル変数ではありません。 つまり、繰り返し文と同じスコープに存在することになります。 この式の結果は破棄されます。

[条件]

この式は、各繰り返しがカウントアップする前に評価されます。 もしこの式がtrueと評価されれば、処理文が実行されます。 この[条件]は任意にすることが出来ます。 もし省略されれば、この条件は常にtrueと評価されることになります。 もしこの式がfalseと評価されると、このforの構成の後に続く次の処理にスキップされます。

[各繰り返しの最後に実行される式]

各繰り返し処理の最後に評価される式です。 これは次の条件が評価される前に発生します。 一般的にカウンタ変数を更新または増加するのに使用されます。

処理文

条件の評価がtrueである限り実行される処理文になります。 繰り返し処理内で複数の文を実行するには、 それらのグループをグループ化した、ブロック文({ ... })を使用してください。 繰り返し中に、何も処理文を実行しないのであれば、空の処理文(;)を使用してください。

例

forの使用例

下記のfor文は、変数iを定義し、それを0に初期化して処理を開始しています。 iが9より少ない数値かを調べ、次に続く文を実行し、 各繰り返し処理の後にiの値を1増加します。

for (var i = 0; i < 9; i++) {
   console.log(i);
   // その他の処理文
}

例: for式の任意(省略可)項目について

forの最初の3つの全ての式は、任意項目です。 例えば、初期化のブロックで、必ずしも変数の初期化が必要というわけではありません。

var i = 0;
for (; i < 9; i++) {
    console.log(i);
   // その他の処理文
}

初期化のブロックと同様に、条件のブロックも任意項目です。 もし、この式を省略するのであれば、無限ループにならないように、 繰り返し処理文中にbreakが実行されるようにしなければいけません。

for (var i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
   // その他の処理文
}

3つ全てのブロックを省略することも可能です。 繰り返しになりますが、必ずそのループを終了するbreakを指定してください。 また、ある地点でbreakの条件がtrueとなるように、変数(この例ではi)の編集(増加)を行って下さい。

var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

例: 空文の使用

下記のforの繰り返し処理は、[各繰り返しの最後に実行される式]セクションでのノードのオフセット位置を計算するため、 文またはブロック文を必要としないため、 代わりに空文が使用されています。

function showOffsetPos (sId) {
  var nLeft = 0, nTop = 0;

  for (var oItNode = document.getElementById(sId); // 初期化
       oItNode; // 条件
       nLeft += oItNode.offsetLeft,
        nTop += oItNode.offsetTop,
        oItNode = oItNode.offsetParent) // 各繰り返しの最後に実行される式
       /* 空文(セミコロンのみ) */ ;

  console.log("要素 \"" + sId + "\" のオフセット位置:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
}

// 呼び出し例:
showOffsetPos("content");

// 出力:
// "要素 "content" のオフセット位置:
// left: 0px;
// top: 153px;"

文を使用しないこのケースでは、繰り返しの宣言のすぐ後にセミコロンが置かれていることに注意してください。

仕様

注意事項

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	◯	◯	◯	◯

モバイル

機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯	◯

関連項目

• break
• continue
• 空文
• while
• do...while
• for...in

 Back to top