for 文は丸括弧で囲まれ、セミコロンにより分けられた、3 つの省略可能な式で構成されるループを作成します。式の後にはループの中で実行される文が続きます。
構文
for ([initialization]; [condition]; [final-expression]) statement
initialization
- (代入式を含む) 式または変数宣言。たいていは、カウンタ変数を初期化するために使われます。この式では、
var
キーワードを用いて新しい変数を任意で宣言してもかまいません。これらの変数はループにローカルなものではありません。すなわち、これらはfor
ループが属するスコープと同じスコープ内にあります。この式の結果は捨て去られます。 condition
- ループの各反復の前に評価される式。もしこの式が true に評価されるなら、
statement
が実行されます。この条件テストは省略可能です。もし省略されたなら、条件は常に true に評価されます。もしこの式が false に評価されるなら、実行はfor
の構成子に続く最初の式に飛びます。 final-expression
- ループの各反復の終わりに評価される式。これは、
condition
の次の評価の前に発生します。一般的には、カウンタ変数を更新または増加するために使われます。 statement
- 条件が true に評価される限り実行される文。ループ内で複数の文を実行するには、それらの文をグループ化するためにブロック文 (
{ ... }
) を使ってください。ループ内で実行する文をなくすには、empty 文 (;
) を使用します。
例
例: for
を使う
次の for
文は、変数 i
を宣言し、それを 0
に初期化することから始まります。i
が 9 より小さいことをチェックし、続く 2 つの文を実行し、ループを通過した後ごとに i
を 1 増加します。
for (var i = 0; i < 9; i++) { console.log(i); // more statements }
省略可能な for
の式
for
ループの先頭にある 3 つの式は、省略可能です。
例えば、initialization ブロックで変数を初期化する必要はありません:
var i = 0; for (; i < 9; i++) { console.log(i); // more statements }
initialization ブロックと同様に、condition ブロックも省略可能です。この式を省略すると、無限ループを作成しないようにするため、break 文を置くようにしなければなりません。
for (var i = 0;; i++) { console.log(i); if (i > 3) break; // more statements }
3 つのブロックをすべて省略することもできます。繰り返しますが、ループを終了するための break
文や変数を変更 (増加) する処理を使うようにしてください。その結果、ある時点で break 文の条件が true になります。
var i = 0; for (;;) { if (i > 3) break; console.log(i); i++; }
empty 文を伴う for
を使用する
以下の for
ループは [final-expression] セクションでノードのオフセット位置を計算しており、statement
や block 文
を使用する必要はありません。代わりに empty 文を使用しています。
function showOffsetPos (sId) { var nLeft = 0, nTop = 0; for (var oItNode = document.getElementById(sId); // initialization oItNode; // condition nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression /* empty statement */ ; console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;"); } // Example call: showOffsetPos("content"); // Output: // "Offset position of "content" element: // left: 0px; // top: 153px;"
注記: この例では
statement
セクションを使用しないとき、セミコロンをループの宣言の直後に置きます。仕様
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本サポート | (有) | (有) | (有) | (有) | (有) |
機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本サポート | (有) | (有) | (有) | (有) | (有) | (有) |