JavaScript-ループ制御

JavaScriptは、ループの処理とステートメントの切り替えを完全に制御します。ループの底に達することなくループから抜け出す必要がある場合があります。また、コードブロックの一部をスキップして、ループの次の反復を開始する場合もあります。

このような状況をすべて処理するために、JavaScriptには break および continue ステートメントが用意されています。これらのステートメントは、ループから即座に抜け出すため、またはループの次の反復を開始するためにそれぞれ使用されます。

breakステートメント

_switch_ステートメントで簡単に導入された break ステートメントは、ループを早期に終了し、中括弧から抜け出すために使用されます。

フローチャート

breakステートメントのフローチャートは次のようになります-

ブレイクステートメント

例

次の例は、whileループでの break ステートメントの使用を示しています。 x が5に到達し、閉じ中括弧のすぐ下にある* document.write（..）*ステートメントに到達すると、ループがどのように早く発生するかに注意してください-

<html>
   <body>
      <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>

      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...

*switch* ステートメント内での *break* ステートメントの使用はすでに確認しています。

continueステートメント

*continue* ステートメントは、ループの次の反復をすぐに開始し、残りのコードブロックをスキップするようにインタープリターに指示します。 *continue* ステートメントが検出されると、プログラムフローはすぐにループチェック式に移動し、条件が真のままであれば次の反復を開始し、そうでない場合は制御がループから抜け出します。

例

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

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var x = 1;
            document.write("Entering the loop<br/> ");

            while (x < 10) {
               x = x + 1;

               if (x == 5) {
                  continue;  //skip rest of the loop body
               }
               document.write( x + "<br/>");
            }
            document.write("Exiting the loop!<br/> ");
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

ラベルを使用してフローを制御する

JavaScript 1.2以降では、ラベルを break および continue とともに使用して、フローをより正確に制御できます。 *ラベル*は、ステートメントまたはコードブロックに適用されるコロン（:)が後に続く単なる識別子です。 breakとcontinueでラベルを使用する方法を理解するために、2つの異なる例を見ていきます。

注- 'continue' または 'break' ステートメントとそのラベル名の間で改行することはできません。また、ラベル名と関連ループの間に他のステートメントがあってはなりません。

ラベルをよりよく理解するには、次の2つの例を試してください。

例1

次の例は、breakステートメントでLabelを実装する方法を示しています。

<html>
   <body>
      <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>
   </body>
</html>

出力

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

<html>
   <body>

      <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>

   </body>
</html>

出力

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!

Javascript-loop-control

JavaScript-ループ制御

breakステートメント

フローチャート

例

出力

continueステートメント

例

出力

ラベルを使用してフローを制御する

例1

出力

例2

出力

目次