JavaScriptのfor文のサンプルとfor文でbreakとcontinueを使用するサンプルです。
目次
for文
| for(初期化式 ; 条件式 ; 増減式){ 繰り返される箇所 } |
- 初期化式は、最初に１回だけ実行されます。
- 初期化式にあるループで使用する変数をカウンター変数またはループ変数といいます。
- 条件式がtrueの間、処理を繰り返します。
- 増減式でカウンター変数/ループ変数の値が変わります。
- 以下はMDNのfor文のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for
コード
for文のサンプルです。
3行目のカウンター変数のiは0から始まり、増減式(i++)により１ずつ増えていきます。
i <3がtrueの間、処理を繰り返します。0,1,2が出力されます。
<script>
for (var i = 0; i < 3; i++) {
document.write(i); // 0 1 2
}
</script>
break文のサンプル
- for文でbreakを使用するとループ処理から抜けます。(そのブロックから抜けます）
- 「{」(波括弧) から「}」までをブロックといいます。
- 以下はMDNのbreakのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/break
コード
for文でbreakを使用するサンプルです。
7行目のbreakでfor文を抜けます。i=0のみ出力されます。
<script>
for (var i = 0; i < 3; i++) {
if (i == 1) {
break; // ループ処理から抜ける
}
document.write("i=" + i); // 出力結果 i=0
}
</script>
for文が入れ子のときのbreak文のサンプル
for文が入れ子のときのbreakのサンプルです。
3,5行目にfor文があり入れ子になっています。
8行目のbreakは、内側のfor文のみ抜けます。
<script>
for (var i = 0; i < 2; i++) {
for (var j = 0; j < 2; j++) {
if (j == 0) {
break;
}
document.write("j=" + j); //出力なし
}
document.write("i=" + i); // i=0 i=1
}
</script>
continue文のサンプル
- for文でcontinueを使用すると、ループ処理の先頭に戻ります。(ブロックの先頭位置に戻ります）
- 「{」(波括弧) から「}」までをブロックといいます。
- 以下はMDNのcontinueのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/continue
コード
for文でcontinueを使用するサンプルです。
7行目のcontinueでループ処理の先頭に戻ります。i=0とi=2が出力されます。
<script>
for (var i = 0; i < 3; i++) {
if (i == 1) {
continue; //ループ処理の先頭に戻る
}
document.write("i=" + i); // 出力結果 i=0 i=2
}
</script>
for文が入れ子のときのcontinue文のサンプル
for文が入れ子のときのcontinueのサンプルです。
3,5行目にfor文があり入れ子になっています。
8行目のcontinueは、内側のfor文の先頭の5行目に戻ります
<script>
for (var i = 0; i < 2; i++) {
for (var j = 0; j < 2; j++) {
if (j == 0) {
continue;
}
document.write("j=" + j); //j=1 j=1
}
document.write("i=" + i); // i=0 i=1
}
</script>関連の記事
JavaScript if文のサンプル
JavaScript switch文のサンプル
JavaScript while文とdo...while文のサンプル