JavaScript で「繰り返し」２

　今回も繰り返し処理です。ループ処理の流れを変える方法を考えます。

１　break 文とは

　ループ処理の流れは break 文で変えることができます。

書式

while（条件式）{
    行わせたい処理
        条件式
            break;
}

　書式例は上記のようになります。
　この例では、ループの条件式内に break を記述しているため、処理の途中でこの while ループを抜けることができます。

　まずは通常のループ処理です。

HTML（コード入力）

<!DOCTYPE html>
<html lang="ja">

<head>
<title>breakなし</title>
<meta charset="UTF-8">
</head>

<body>

<p>breakなし
<script>
let a = 0;
while(a < 7){
    document.write(a + " ");
    a++;
}
</script>
</p>

</body>
</html>

ブラウザ（実行結果）

breakなし

　ループ処理によって、変数 a に「０」から「６」までが代入され、document.write が計７回実行されました。

　条件式と break を置いてみましょう。

HTML（コード入力）の一部

<p>breakあり
<script>
let b = 0;
let c = 0;
while(b < 7){
    document.write(b + " ");
    b++;
    c = b * 2
    if(c > 9){
        break;
    }
}
</script>
</p>

ブラウザ（実行結果）

breakなし

breakあり

　この例では、変数 b のほかに、新たに c （ b の倍数）という変数を作っています。
　そしてループ内の処理（document.write、b++）のあと、変数 c の値を判断して、c が「９」より小さいときは、break によりこのループ処理を抜けるようにしています。
　ループ処理を抜けるタイミングは、c > 9 のとき、つまり c が「１０」のときですから、このとき b の値は「５」です。
　そして、その直前の document.write における変数 b の値は b++ の処理の前なので「４」です。
　したがって、変数 b の値が「０」から「４」までの間、計５回 document.write が実行されることになります。

２　continue 文とは

ループ処理の流れは continue 文でも変えることができます。

書式

while（条件式）{
    条件式
        continue;
    行わせたい処理
}

　書式例は上記のようになります。
　この例では、ループの条件式内に continue を記述しているため、以降の処理は実行されず、while ループの先頭まで戻ります。
　ループ処理が終了するのではなく、ある条件を満たしたときだけ、行わせたい処理を実行せずにループ処理を継続する点に注意です。

　まずは通常のループ処理です。

HTML（コード入力）

<!DOCTYPE html>
<html lang="ja">
<head>
<title>continueなし</title>
<meta charset="UTF-8">
</head>
<body>

<p>continueなし
<script>
let d = 0;
while(d < 7){
    d++;
    document.write(d + " ");
}
</script>
</p>

</body>
</html>

ブラウザ（実行結果）

continueなし

　ループ処理によって、変数 d に「０」が代入されループ処理が始まります。
　まず d++ と記述されていることから「１」から処理が開始されます。
　そして、変数 d の値が「７」になったときの処理 document.write が実行されたあと、条件式 d < 7 が判断されループから抜けることになります。

　次は上記の break と異なる位置に条件式と continue を置いてみましょう。

HTML（コード入力）の一部

<p>continueあり
<script>
let e = 0;
while(e < 7){
    e++;
    if(e == 3){
        continue;
    }
    document.write(e + " ");
}
</script>
</p>

ブラウザ（実行結果）

continueあり

　この例では、変数 e の増分処理 e++ と、document.write との間に、条件式と continueを挿入しています。
　ループ内でまず変数 e に「１」が足されて、変数 e の値が「１」で処理がスタートします。
　この if 文では、変数 e の値が「３」のときに、その下の処理 document.write を実行せずに先頭に戻るという記述です。
　したがって、変数 e の値が「１」のときは、そのまま document.write が実行されます。

　そして、変数 e の値が「３」のときに、この if 文の条件式を満たすために、document.write は実行されず、そのまま先頭に戻ることになります。
　繰り返しますが、戻ってもループ処理自体は継続（コンティニュー）します。
　ですので、実行結果を見ると、「３」という数値だけが抜けていますね。

　なお、for 文でも同じように、break や continue を使うことができます。

３　次回

　さて次回は、これまた重要な「コレクション」（いわゆる配列）についてみていきます。

手習い日記帳

JavaScript で「繰り返し」２

１　break 文とは

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

２　continue 文とは

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３　次回

カテゴリー

更新記事

タグ

JavaScript で「繰り返し」２

１ break 文とは

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

２ continue 文とは

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３ 次回

カテゴリー

更新記事

タグ

１　break 文とは

２　continue 文とは

３　次回