JavaScript - Control de bucle

JavaScript proporciona control total para manejar bucles y cambiar declaraciones. Puede haber una situación en la que necesite salir de un bucle sin llegar a su fondo. También puede haber una situación en la que desee omitir una parte de su bloque de código e iniciar la siguiente iteración del ciclo.

Para manejar todas estas situaciones, JavaScript proporciona break y continuedeclaraciones. Estas declaraciones se utilizan para salir inmediatamente de cualquier ciclo o para iniciar la siguiente iteración de cualquier ciclo, respectivamente.

La declaración de descanso

los breakLa instrucción, que se introdujo brevemente con la instrucción switch , se utiliza para salir de un bucle antes de tiempo, saliendo de las llaves que lo encierran.

Diagrama de flujo

El diagrama de flujo de una declaración de ruptura sería el siguiente:

Ejemplo

El siguiente ejemplo ilustra el uso de un breakdeclaración con un bucle while. Observe cómo el bucle se desata temprano una vezx llega a 5 y llega a document.write (..) declaración justo debajo de la llave de cierre -

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

Salida

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

Ya hemos visto el uso de break declaración en el interior a switch declaración.

La declaración de continuar

los continueLa instrucción le dice al intérprete que comience inmediatamente la siguiente iteración del ciclo y salte el bloque de código restante. Cuando unacontinue se encuentra una sentencia, el flujo del programa se mueve a la expresión de verificación del ciclo inmediatamente y si la condición permanece verdadera, entonces comienza la siguiente iteración; de lo contrario, el control sale del ciclo.

Ejemplo

Este ejemplo ilustra el uso de un continuedeclaración con un bucle while. Note como elcontinue La declaración se usa para omitir la impresión cuando el índice se mantiene en la variable x llega a 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>

Salida

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

Uso de etiquetas para controlar el flujo

A partir de JavaScript 1.2, se puede usar una etiqueta con break y continuepara controlar el flujo con mayor precisión. UNlabeles simplemente un identificador seguido de dos puntos (:) que se aplica a una declaración o un bloque de código. Veremos dos ejemplos diferentes para entender cómo usar etiquetas con romper y continuar.

Note - No se permiten saltos de línea entre ‘continue’ o ‘break’declaración y su nombre de etiqueta. Además, no debería haber ninguna otra declaración entre el nombre de una etiqueta y el bucle asociado.

Pruebe los siguientes dos ejemplos para comprender mejor las etiquetas.

Ejemplo 1

El siguiente ejemplo muestra cómo implementar Label con una declaración de interrupción.

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

Salida

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!

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

Salida

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!

↰ Previous page Next page ↱