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 i
en 1 y «-» disminuye i
en 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 i
se incrementa por primera vez mediante el uso del operador de incremento de prefijo. Esto significa que i
se incrementa antes de que su valor se use en la instrucción y, j
por lo tanto, el valor de se establece en 1. Cuando i
se incrementa por segunda vez, por el contrario, es mediante el uso del operador de incremento postfijo. Esto significa que i
se incrementa después de que su valor se usa en la instrucción y, por j
lo 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: while
bucles, do... while
bucles y for
bucles. Comenzamos con while
bucles.
El propósito de un while
ciclo 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.
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 while
bucle: la while
palabra 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 i
es 0, una segunda vez cuando i
es 1 y una tercera vez cuando i
es 2. Durante la tercera ejecución i
se incrementa a 3; esto significa que la i < 3
siguiente vez que se verifica la condición ( ), se encuentra que es falsa y el ciclo termina.
¿Qué sucede si la condición en un while
bucle 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... while
ciclo.
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... while
ciclo, el cuerpo del ciclo se escribe después de la do
palabra 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.
«por»
for
los bucles se diferencian de los bucles while
y do... while
en un aspecto importante: la sintaxis de un for
bucle 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 for
ciclo, como se ilustra en este ejemplo, es algo más compleja que la de un ciclo while
o do... while
, por lo que nos tomará un poco más de tiempo repasarlo. Podemos ver que un for
ciclo comienza con la for
palabra 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 for
bucle 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 i
es 0 y otra vez cuando i
es 1. Después de la segunda ejecución, el componente de actualización se incrementa i
a 2. Esto significa que cuando i < 2
se 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 for
bucle son todos opcionales, estrictamente hablando, aunque normalmente se esperaría incluirlos. Para obtener más información sobre usos no estándar, consulte:
«romper» y «continuar»
Las palabras clave break
y continue
le 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 break
y continue
: break
se usa para terminar un ciclo inmediatamente, mientras que continue
se usa para pasar a la siguiente iteración.
Para ilustrar la diferencia, tomemos un ejemplo que involucre un while
bucle:
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 break
y lo reemplaza con continue
, verá un resultado diferente: Loops.html muestra “ahora es 1; ahora tengo 3;”. Esto muestra que continue
no 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 for
bucle 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 break
o continue
en bucles anidados, puede ser útil etiquetar sus bucles. Por ejemplo, considere este uso de break
en 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 break
declaració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, break
se habría referido al bucle interior ya que por defecto break
se 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