JavaScriptのループ制御文の使い方を詳しく解説_基礎知識

JavaScript は、ループと switch ステートメントの処理を完全に制御します。状況によっては、ループの底に到達せずにループを終了する必要がある場合があります。コード ブロックの一部をスキップして、次の反復を直接開始したい場合もあります。

こうした状況に対処するために、JavaScript には Break ステートメントと continue ステートメントが用意されています。これらのステートメントは、ループを直ちに終了するか、ループの次の反復を開始するために使用されます。
ブレークステートメント:

break ステートメントは、switch ステートメントとともに導入されるだけで、ループを早期に終了し、右中括弧を中断するために使用されます。
例:

この例は、while ループで Break ステートメントを使用する方法を示しています。最初にループが x から 5 まで、document.write(..) ステートメントのすぐ下で右中括弧を使用して中断されることに注意してください:

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
 if (x == 5){ 
   break; // breaks out of loop completely
 }
 x = x + 1;
 document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

これにより、次の結果が生成されます:

Entering the loop
2
3
4
5
Exiting the loop!

switch ステートメントで使用される Break ステートメントを見てきました。
ステートメントの継続:

continue ステートメントは、インタープリタにループの次の反復を直ちに開始し、残りのコード ブロックをスキップするように指示します。

Continue ステートメントが見つかると、プログラム フローは直ちにループに移行して式をチェックします。条件が true のままであれば、次の反復が開始されます。それ以外の場合、コントロールはループを終了します。
例:

この例は、while ループでの continue ステートメントの使用を示しています。 continue ステートメントは、指数変数 x が 5 に達したときに印刷をスキップするために使用されることに注意してください:

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
 x = x + 1;
 if (x == 5){ 
   continue; // skill rest of the loop body
 }
 document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

これにより、次の結果が生成されます:

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!

タグを使用してフローを制御します:

JavaScript 1.2 以降、タグを Break とともに使用して、プロセスをより正確に制御し続けることができるようになりました。

タグは、ステートメントまたはコード ブロックに適用されるコロンが後に続く単純な識別子です。ラベルの使用状況の内訳を理解して続行するには、2 つの異なる例を参照してください。

注: 継続または中断ステートメントとそのタグ名の間には改行を使用できます。さらに、タグ名と関連するループの間に他の宣言があってはなりません。
例 1:

<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop:  // This is the label name
for (var i = 0; i < 5; i++)
{
 document.write("Outerloop: " + i + "<br />");
 innerloop:
 for (var j = 0; j < 5; j++)
 {
   if (j > 3 ) break ;     // Quit the innermost loop
   if (i == 2) break innerloop; // Do the same thing
   if (i == 4) break outerloop; // Quit the outer loop
   document.write("Innerloop: " + j + " <br />");
  }
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

これにより、次の結果が生成されます:

Entering the loop!
Outerloop: 0
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 1
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 2
Outerloop: 3
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 4
Exiting the loop!

例 2:

<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop:  // This is the label name
for (var i = 0; i < 3; i++)
{
  document.write("Outerloop: " + i + "<br />");
  for (var j = 0; j < 5; j++)
  {
   if (j == 3){
     continue outerloop;
   }
   document.write("Innerloop: " + j + "<br />");
  } 
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

これにより、次の結果が生成されます:

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!