for文やwhile文を使って行うループ処理は、条件式の評価がtrueの間ループし続け、条件式の評価がfalseになった時点で処理が終了しますが、break文を使用すると、条件式の評価がtrueの間にループ処理から抜け出すことができます。
今回は、ループ処理時に使用するbreak文を紹介します。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
break文は、現在実行している一連の処理から抜ける際に使われるキーワードです。
switch文など、ループ処理以外でも使用します。
ループ処理の中にbreak文を記述すると、break文が読み込まれた時点でループ処理のブロックから抜け出すことができます。
通常は、ループ処理の条件式以外のある条件に合致したらループ処理を終了させたい場合に使用するので、if文の中にbreak文を記述することが多いです。
例えば、次のように記述します。
while ( 条件式 ) {
if ( ループから抜け出したい条件式 ) {
break;
}
繰り返し行う処理
}
break文を使うと、次のようなループ処理の書き方もできます。
while ( true ) {
if ( 条件式 ) {
break;
}
繰り返し行う処理
}
ループ処理自体は無条件としておいて、処理を続行するかどうかの判断をループ処理の中で行っています。
次のサンプルは、入力された数字の約数を出力するプログラムです。
約数の数が多そうな数字を入力してOKボタンをクリックしてみて下さい。
上のサンプルを、入力された数字の約数を小さい順に5つまで出力するプログラムに改めてみます。
上のサンプルと同じ数字を入力してOKボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript">
function loop() {
let num = document.getElementById("dat");
document.getElementById("dat2").value = "約数(昇順に5つ):";
let i = 1;
let 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;">
<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を代入します。
let 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() {
let num = document.getElementById("dat");
document.getElementById("dat2").value = "約数(昇順に5つ):";
let j = 0;
for (let 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;">
<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>
INTERNOUS,inc. All rights reserved.