JavaScript【 break 】 ~ ループ処理を抜け出す

Green Illuminated Corporate Office Exit Sign Closeup.

for文やwhile文を使って行うループ処理は、条件式の評価がtrueの間ループし続け、条件式の評価がfalseになった時点で処理が終了しますが、break文を使用すると、条件式の評価がtrueの間にループ処理から抜け出すことができます。
今回は、ループ処理時に使用するbreak文を紹介します。

目次

1.break文とは
2.break文の使い方

1.break文とは

break文は、現在実行している一連の処理から抜ける際に使われるキーワードです。

switch文など、ループ処理以外でも使用します。

ループ処理の中にbreak文を記述すると、break文が読み込まれた時点でループ処理のブロックから抜け出すことができます。

通常は、ループ処理の条件式以外のある条件に合致したらループ処理を終了させたい場合に使用するので、if文の中にbreak文を記述することが多いです。

例えば、次のように記述します。

while ( 条件式 ) {

  if ( ループから抜け出したい条件式 ) {
    break;
  }

  繰り返し行う処理
}

 
break文を使うと、次のようなループ処理の書き方もできます。

while ( true ) {

  if ( 条件式 ) {
    break;
  }

  繰り返し行う処理
}

ループ処理自体は無条件としておいて、処理を続行するかどうかの判断をループ処理の中で行っています。

▲目次へ戻る

2.break文の使い方

次のサンプルは、入力された数字の約数を出力するプログラムです。
約数の数が多そうな数字を入力してOKボタンをクリックしてみて下さい。

 
 
 

 

  
上のサンプルを、入力された数字の約数を小さい順に5つまで出力するプログラムに改めてみます。
上のサンプルと同じ数字を入力してOKボタンをクリックしてみて下さい。

 
 
 

 

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function loop() {

    var num = document.getElementById("dat");
    document.getElementById("dat2").value = "約数(昇順に5つ):";
    var i = 1;
    var j = 0;

    while ( i <= num ) {

        if (num % i == 0){
            document.getElementById("dat2").value += i + " ";
            j++;

            if (j == 5){
                break;
            }
        }
        i++;
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        <div style="display:inline-flex"> 
           <input type="text" id="dat" size="10">
           <input type="button" value="OK" onClick="loop()">
        </div>
 
        <input type="text" id="dat2" value="約数(昇順に5つ):">
    </form>
</div>

 
ループ処理の中で、約数の数をカウントするために、変数jを宣言して、初期値0を代入します。

    var j = 0;

 

そして、「num % i == 0」となる場合に、i が約数となりますが、i を出力した後で j をインクリメントして、その結果 j が5となった時点でbreak文を記述して、ループ処理を抜け出しています。
( j は初期値が0のため、インクリメント後の値が、約数の数となります。)

        if (num % i == 0){
            document.getElementById("dat2").value += i + " ";
            j++;

            if (j == 5){
                break;
            }
        }

 
その他の、while文の内容については、while 文の使い方をご参照下さい。
 
 
上記のサンプルを、for文を使って記述すると、次のようになります。

<script type="text/javascript">
<!--
function loop() {

    var num = document.getElementById("dat");
    document.getElementById("dat2").value = "約数(昇順に5つ):";
    var j = 0;

    for (var i = 1;  i <= num;  i++) {

        if (num % i == 0){
            document.getElementById("dat2").value += i + " ";
            j++;

            if (j == 5){
                break;
            }
        }
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        <div style="display:inline-flex"> 
           <input type="text" id="dat" size="10">
           <input type="button" value="OK" onClick="loop()">
        </div>
 
        <input type="text" id="dat2" value="約数(昇順に5つ):">
    </form>
</div>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です