JS++ | Bucles

A menudo sucede en la programación de computadoras que desea que una pieza de código se ejecute más de una vez. Los bucles son declaraciones de programación que le permiten manejar tales casos. JS++ contiene bucles de varios tipos, y veremos varios de ellos en este tutorial. Sin embargo, comenzaremos examinando dos expresiones que se usan muy comúnmente para facilitar el uso de bucles: el operador de incremento “++” y el operador de decremento “–“.

Nota: Los operadores de incremento y decremento, y las declaraciones de bucle que examinaremos en este tutorial, funcionan de manera similar a sus equivalentes en lenguajes como JavaScript, Java, C++ y C#.

“++” y “–“

Para mostrar estos operadores en acción, tomemos un ejemplo. Cree una nueva carpeta y asígnele el nombre «Loops». Luego cree un nuevo archivo y asígnele el nombre «Loops.jspp». Escribe el siguiente código:

external $;

int i = 0;
$("#content").append("i is now ", i, "; ");
++i;
$("#content").append("i is now ", i, "; ");
--i;
$("#content").append("i is now ", i, "; ");

Guarde Loops.jspp en su carpeta Loops. Luego crea un segundo archivo llamado «Loops.html» y escribe lo siguiente:

<!DOCTYPE html>
<title>Loops program</title>
<body>
<p id="content"></p>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="Loops.jspp.js"></script>
</body>
</html>

Guarde Loops.html en su carpeta Loops. Compile Loops.jspp y luego abra Loops.html en un navegador. Su documento debe mostrar que «++» aumenta el valor de ien 1 y «-» disminuye ien 1.

Como en varios otros lenguajes de programación, «++» y «-» se pueden usar antes o después de la variable. Para ilustrar la diferencia entre estos usos de «prefijo» y «postfijo», cambie el código en Loops.jspp a lo siguiente:

external $;

int i = 0;
int j = 0;
j = ++i;
$("#content").append("j is now ", j, ", and i is now ", i, "; ");    
j = i++;
$("#content").append("j is now ", j, ", and i is now ", i, "; ");

La variable ise incrementa por primera vez mediante el uso del operador de incremento de prefijo. Esto significa que ise incrementa antes de que su valor se use en la instrucción y, jpor lo tanto, el valor de se establece en 1. Cuando ise incrementa por segunda vez, por el contrario, es mediante el uso del operador de incremento postfijo. Esto significa que ise incrementa después de que su valor se usa en la instrucción y, por jlo tanto, el valor de sigue siendo 1. La distinción entre prefijo y sufijo se aplica exactamente de la misma manera a las dos versiones del operador de decremento.

“mientras” y “hacer… mientras”

Ahora examinemos cómo podemos usar los operadores de incremento y decremento en bucles. Veremos tres tipos de bucles en este tutorial: whilebucles, do... whilebucles y forbucles. Comenzamos con whilebucles.

El propósito de un whileciclo es hacer que algún código, el cuerpo del ciclo, se ejecute repetidamente mientras una condición particular sea verdadera. Cuando la condición ya no es verdadera, el cuerpo del ciclo deja de ejecutarse.

While Diagram

Tomemos un ejemplo. Cambie el código en Loops.jspp a lo siguiente:

external $;

int i = 0;
while (i < 3){
    $("#content").append("i is now ", i, "; ");
    i++;
}

Aquí vemos la sintaxis de un whilebucle: la whilepalabra clave, seguida de un par de paréntesis que contienen una condición que se va a verificar, seguido de un bloque de código entre llaves que se ejecutará repetidamente mientras la condición sea verdadera.

En este ejemplo, el bucle se ejecuta tres veces: una vez cuando ies 0, una segunda vez cuando ies 1 y una tercera vez cuando ies 2. Durante la tercera ejecución ise incrementa a 3; esto significa que la i < 3siguiente vez que se verifica la condición ( ), se encuentra que es falsa y el ciclo termina.

¿Qué sucede si la condición en un whilebucle es falsa desde el principio? Si es así, el cuerpo del bucle no se ejecutará. La ejecución de su programa simplemente continúa hasta la primera instrucción que sigue al ciclo. Ese podría ser exactamente el comportamiento que desea; en otros casos puede que no lo sea. Si, en cambio, desea que su ciclo se ejecute al menos una vez antes de verificar si una condición es verdadera, existe un tipo diferente de ciclo para ese propósito: el do... whileciclo.

Cambie el código en Loops.jspp a lo siguiente:

external $;

int i = 0;
do {
    $("#content").append("i is now ", i, "; ");
    i++;
}
while (i > 10);

En un do... whileciclo, el cuerpo del ciclo se escribe después de la dopalabra clave, pero antes de la condición a verificar. El bucle se ejecuta al menos una vez incluso si la condición es falsa la primera vez que se comprueba, como en este ejemplo. Cuando se encuentra que la condición es falsa, el ciclo termina.

Do While Diagram

«por»

forlos bucles se diferencian de los bucles whiley do... whileen un aspecto importante: la sintaxis de un forbucle está diseñada específicamente para facilitar el uso de variables de contador . Echemos un vistazo a un ejemplo:

external $;

for (int i = 0; i < 2; i++) {
    $("#content").append("i is now ", i, "; ");
}

La sintaxis de un forciclo, como se ilustra en este ejemplo, es algo más compleja que la de un ciclo whileo do... while, por lo que nos tomará un poco más de tiempo repasarlo. Podemos ver que un forciclo comienza con la forpalabra clave, que luego es seguida por un código entre paréntesis. El código entre paréntesis tiene tres componentes, que están separados por punto y coma. La primera parte es el componente de inicialización , donde declaramos nuestra variable contador:

int i = 0;

La segunda parte es el componente de condición , que proporciona una prueba para determinar cuándo debe terminar el ciclo:

i < 3;

La tercera parte es el componente de actualización , que normalmente incrementaría o disminuiría la variable del contador:

i++

El código entre paréntesis luego es seguido por el cuerpo del ciclo, en un par de llaves. El cuerpo del bucle se compone de las sentencias que se van a ejecutar.

Un forbucle procede de la siguiente manera (ver también la ilustración a continuación). Primero, se inicializa la variable de contador. En segundo lugar, se comprueba la condición. Si es falso, el ciclo termina; si es cierto, el ciclo continúa con el siguiente paso. En tercer lugar, se ejecuta el cuerpo del bucle. En cuarto lugar, se ejecuta el componente de actualización. Quinto, el bucle vuelve al paso dos y se repite hasta que la condición se vuelve falsa.

En nuestro ejemplo, el cuerpo del bucle se ejecuta dos veces: una vez cuando la variable de contador ies 0 y otra vez cuando ies 1. Después de la segunda ejecución, el componente de actualización se incrementa ia 2. Esto significa que cuando i < 2se verifica la condición, se encuentra que es falso y el ciclo termina.

Nota: los componentes de inicialización, condición y actualización de un forbucle son todos opcionales, estrictamente hablando, aunque normalmente se esperaría incluirlos. Para obtener más información sobre usos no estándar, consulte:

JS++ para bucles

«romper» y «continuar»

Las palabras clave breaky continuele brindan flexibilidad adicional al usar bucles, y ambas se pueden usar en todos los tipos de bucles que hemos examinado. Sin embargo, es importante entender la diferencia entre breaky continue: breakse usa para terminar un ciclo inmediatamente, mientras que continuese usa para pasar a la siguiente iteración.

Para ilustrar la diferencia, tomemos un ejemplo que involucre un whilebucle:

external $;

int i = 0;
while (i < 3) {
    i++;
    if(i == 2) {
        break;
    }
    $("#content").append("i is now ", i, "; ");
}

Si escribe este código en Loops.jspp, lo compila y luego abre Loops.html en un navegador, mostrará «i is now 1;». No muestra más que eso, ya que el ciclo termina a la mitad de su segunda iteración, debido al uso de break. Sin embargo, si lo elimina breaky lo reemplaza con continue, verá un resultado diferente: Loops.html muestra “ahora es 1; ahora tengo 3;”. Esto muestra que continueno termina el bucle por completo; solo finaliza la iteración actual, de modo que el ciclo salta a la siguiente iteración.

Bucles anidados y etiquetados

Los bucles se pueden anidar , lo que significa poner un bucle dentro de otro. Aquí hay un ejemplo de un forbucle anidado:

external $;

for (int i = 0; i < 2; i++) {
    $("#content").append("i is now ", i, "; ");
    for (int j = 0; j < 2; j++) {    
        $("#content").append("j is now ", j, "; ");
    }
}

En casos como este, el ciclo interno ejecuta todas sus iteraciones para cada iteración del ciclo externo. En este caso, el ciclo externo se ejecuta dos veces y para cada una de esas dos ejecuciones, el ciclo interno se ejecuta dos veces. Por lo tanto, el bucle interno se ejecuta cuatro veces en total.

Si desea usar breako continueen bucles anidados, puede ser útil etiquetar sus bucles. Por ejemplo, considere este uso de breaken un bucle anidado:

external $;

outer: for (int i = 0; i < 2; i++) {
    $("#content").append("i is now ", i, "; ");
    inner: for (int j = 0; j < 2; j++) {    
        if(j == 0) {
            break outer;
        }
        $("#content").append("j is now ", j, "; ");
    }
}

Al etiquetar el ciclo externo outer, hacemos posible referirnos a ese ciclo cuando usamos la breakdeclaración dentro del ciclo interno. Este uso de break, por lo tanto, termina el ciclo externo, no solo el interno. Si no hubiéramos usado etiquetas, breakse habría referido al bucle interior ya que por defecto breakse refiere al bucle más interior en el que se produce. Las observaciones paralelas se aplican a continue: por defecto se refiere al bucle más interno en el que ocurre, pero también puede referirse explícitamente a un bucle externo a través de una etiqueta.

Publicación traducida automáticamente

Artículo escrito por CharlesKozenyPelling y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *