JavaScript - Contrôle de boucle

JavaScript fournit un contrôle total pour gérer les boucles et les instructions de commutation. Il peut y avoir une situation où vous devez sortir d'une boucle sans atteindre son fond. Il se peut également que vous souhaitiez ignorer une partie de votre bloc de code et démarrer la prochaine itération de la boucle.

Pour gérer toutes ces situations, JavaScript fournit break et continuedéclarations. Ces instructions sont utilisées pour sortir immédiatement de n'importe quelle boucle ou pour démarrer la prochaine itération de n'importe quelle boucle respectivement.

La déclaration de rupture

le break, qui a été brièvement introduite avec l' instruction switch , est utilisée pour quitter une boucle tôt, en sortant des accolades englobantes.

Organigramme

L'organigramme d'une instruction break ressemblerait à ceci:

Exemple

L'exemple suivant illustre l'utilisation d'un breakinstruction avec une boucle while. Remarquez comment la boucle éclate tôt une foisx atteint 5 et atteint à document.write (..) déclaration juste en dessous de l'accolade fermante -

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

Production

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

Nous avons déjà vu l'utilisation de break déclaration à l'intérieur a switch déclaration.

La déclaration continue

le continueindique à l'interpréteur de démarrer immédiatement l'itération suivante de la boucle et d'ignorer le bloc de code restant. Lorsqu'uncontinue est rencontrée, le flux du programme passe immédiatement à l'expression de vérification de boucle et si la condition reste vraie, alors il démarre l'itération suivante, sinon le contrôle sort de la boucle.

Exemple

Cet exemple illustre l'utilisation d'un continueinstruction avec une boucle while. Remarquez comment lecontinue instruction est utilisée pour ignorer l'impression lorsque l'index contenu dans la variable x atteint 5 -

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

Production

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

Utilisation d'étiquettes pour contrôler le flux

À partir de JavaScript 1.2, une étiquette peut être utilisée avec break et continuepour contrôler le flux plus précisément. UNElabelest simplement un identifiant suivi de deux points (:) qui est appliqué à une instruction ou à un bloc de code. Nous verrons deux exemples différents pour comprendre comment utiliser les étiquettes avec pause et continuer.

Note - Les sauts de ligne ne sont pas autorisés entre ‘continue’ ou ‘break’instruction et son nom d'étiquette. De plus, il ne doit y avoir aucune autre instruction entre un nom d'étiquette et une boucle associée.

Essayez les deux exemples suivants pour une meilleure compréhension des étiquettes.

Exemple 1

L'exemple suivant montre comment implémenter Label avec une instruction break.

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

Production

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!

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

Production

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!