for文はプログラムを記述する際によく使用する構文です。
例えば、変数の値が0から10になるまで処理を繰り返すといった場合です。
このような繰返しの処理を行う場合に使われるのが「for」文です。
for文の書式
|
1 2 3 4 |
for (初期値; 条件式; 増減式) { 繰返し処理１ 繰返し処理２ } |
上記の書式について詳しく見ていくと、for文の繰返し条件は。「初期値」、「条件式」、「増減式」の３つで構成されています。
① 初期値：繰返し処理の初回に設定される変数の値
② 条件式：繰返し処理を行うかどうかの判断をする式
③ 増減式：繰返し処理を行うごとに、変数の値を増やしたり減らしたりする式
|
1 2 3 4 5 |
function test1(){ for (var i = 0; i < 5; i++) { document.write("iの値：" + i + "<br>"); } } |
for文の書式に当てはめて上のプログラムを見ていくと、
① 初期値：０を代入
② 条件式：i が５未満だったら処理を繰返すことを表現
③ 増減式：１回処理を行うごとに i に１をプラスすることを表現
①〜③の条件式を満たしている間に次の繰返し処理が実行されます。
|
1 |
document.write("iの値：" + i + "<br>"); |
このプログラムをブラウザに出力した結果を見ると、0〜4までの値が出力されました。
|
1 2 3 4 5 |
iの値：0 iの値：1 iの値：2 iの値：3 iの値：4 |
応用編① 配列でfor文を使う
プログラムでは、配列といって複数の値を格納しておくための入れ物がよく使われます。
配列に入っている値の数だけ処理を繰り返したい場合、for文を使うことで簡潔に記述することができます。
実際に配列の中の値を順番に表示するプログラムを例に見てみると
|
1 2 3 4 |
var array = ["東京", "千葉", "神奈川", "埼玉"]; for (var i = 0; i < array.length; i++) { document.write("配列の" + i + "番目の値：" + array[i] + "<br>"); } |
arrayという配列に、「東京」、「千葉」、「神奈川」、「埼玉」という値が格納されていた場合、プログラムの実行結果は次のようになります。
|
1 2 3 4 |
配列の0番目の値：東京 配列の1番目の値：千葉 配列の2番目の値：神奈川 配列の3番目の値：埼玉 |
配列の要素数はlengthプロパティで取得することができます。
配列には順番にインデックスが振られているため、例のようにarray[i]と記述することで配列の各要素を参照することができます。
応用編② 繰返し処理の途中で処理を中断する
繰返し処理を行う際、現在の処理を中断したり、繰返し処理後の別の処理に移動したい場合があります。
その時に使われるのが、「break」と「continue」です。
違いを説明すると、「break」は繰返し処理を直ちに終了させる場合、「continue」は実行中の繰返し処理を中断し、次の処理に移動する場合に使用します。
実際のプログラムを見てみましょう。
|
1 2 3 4 5 6 |
for (var i = 0; i < 10; i++) { if(i == 5) { break; } document.write("iの値：" + i + "<br>"); } |
条件式はi<10までとなっていますが、iが5になったらbreak（処理を終了する）と記述されているので、繰返し処理はiが0から4までしか実行されません。
実行結果は以下のようになります。
|
1 2 3 4 5 |
iの値：0 iの値：1 iの値：2 iの値：3 iの値：4 |
処理を繰返しの途中で直ちに終了する「break」に対し、ある条件の時だけ処理を中断する「continue」はどうでしょうか。
|
1 2 3 4 5 6 |
for (var i = 0; i<10; i++) { if(i == 5) { continue; } document.write ("iの値：" + i + "<br>"); } |
実行結果を見てみると、5の出力処理がスキップされてるので5が出力されていません。
|
1 2 3 4 5 6 7 8 9 |
iの値：0 iの値：1 iの値：2 iの値：3 iの値：4 iの値：6 iの値：7 iの値：8 iの値：9 |
このように、for文を使いこなすことで同じ処理を簡潔に記述することができます。
