JavaScript - Control de bucle
JavaScript - Control de bucle
JavaScript proporciona control total para manejar loops y cambiar instrucciones. Puede haber una situación en la que deba salir de un bucle sin tocar fondo. También puede haber una situación en la que desea omitir una parte de su bloque de código y comenzar la siguiente iteración del ciclo.
Para manejar todas estas situaciones, JavaScript proporciona declaraciones break y continue . Estas declaraciones se usan para salir inmediatamente de cualquier bucle o para iniciar la siguiente iteración de cualquier bucle, respectivamente.
Declaración de ruptura
Diagrama de flujo
El diagrama de flujo de una sentencia break se verá de la siguiente manera:
Ejemplo
El siguiente ejemplo ilustra el uso de una instrucción break con un ciclo while. Observe cómo el ciclo se activa temprano una vez que x llega a 5 y alcanza la instrucción document.write (..) 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 la declaración break dentro de la declaración a switch .
La declaración de continuar
La instrucción continuar le dice al intérprete que inicie inmediatamente la siguiente iteración del ciclo y omita el bloque de código restante. Cuando se encuentra una instrucción continuar , el flujo del programa se mueve a la expresión de comprobación de bucle inmediatamente y si la condición sigue siendo verdadera, comienza la siguiente iteración, de lo contrario, el control sale del bucle.
Ejemplo
Este ejemplo ilustra el uso de una instrucción continuar con un ciclo while. Observe cómo se usa la instruccióncontinuar para omitir la impresión cuando el índice contenido en la variable x alcanza 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!
Usando etiquetas para controlar el flujo
A partir de JavaScript 1.2, se puede utilizar una etiqueta con ruptura y continuar para controlar el flujo con mayor precisión. Una etiqueta es simplemente un identificador seguido de dos puntos (:) que se aplica a una instrucción o un bloque de código. Veremos dos ejemplos diferentes para entender cómo usar etiquetas con break y continue.
Nota : no se permiten saltos de línea entre la instrucción 'continuar' o 'break' y su nombre de etiqueta. Además, no debe haber ninguna otra instrucción entre un nombre de etiqueta y un bucle asociado.
Pruebe los siguientes dos ejemplos para una mejor comprensión de las etiquetas.
Ejemplo 1
El siguiente ejemplo muestra cómo implementar Label con una sentencia 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>
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!
No comments