A menudo tenemos la necesidad de realizar acciones similares muchas veces seguidas. Por ejemplo, cuando necesitamos dar salida a bienes de una lista uno tras otro. O simplemente ejecute el mismo código para cada número del 1 al 10.
Los bucles son una forma de repetir la misma parte del código varias veces.
El bucle «while»
El bucle while tiene la siguiente sintaxis:
while (condicion) {
// código
// el llamado "cuerpo del bucle"
}
Mientras que la condición sea true (verdadera), el código se ejecuta desde el cuerpo del bucle.
Por ejemplo, el bucle de abajo produce i mientras (while) i < 3:
let i = 0;
while (i < 3) { // muestra 0, luego 1, luego 2
alert( i );
i++;
}
Una sola ejecución del cuerpo del bucle se llama iteración . El bucle en el ejemplo anterior hace tres iteraciones.
Si no hubiera i++ en el ejemplo anterior, el bucle se repetiría (en teoría) para siempre. En la práctica, el navegador proporciona formas de detener dichos bucles, y para el JavaScript del lado del servidor podemos detener el proceso.
Cualquier expresión o variable puede ser una condición de bucle, no solo una comparación. Son evaluados y convertidos en un booleano por while.
Por ejemplo, la forma más corta de escribir while (i != 0) podría ser while (i):
let i = 3;
while (i) { // cuando i es 0, la condición es false, y el bucle se para
alert( i );
i--;
}
No se requieren soportes para un cuerpo de una sola línea
Si el cuerpo del bucle tiene una sola declaración, podemos omitir los corchetes {…}:
let i = 3; while (i) alert(i--);
El bucle «hacer … mientras» o Do… While
La verificación de condición se puede mover debajo del cuerpo del bucle usando la sintaxis do… while:
do {
// Cuerpo del bucle
} while (condition);
El bucle ejecutará primero el cuerpo, luego verificará la condición y, si bien es cierto, lo ejecutará una y otra vez.
Por ejemplo:
let i = 0;
do {
alert( i );
i++;
} while (i < 3);
Esta forma de sintaxis rara vez se utiliza, excepto cuando desea que el cuerpo del bucle se ejecute al menos una vez, independientemente de que la condición sea verdadera. Por lo general, se prefiere la otra forma: while(…) {…}.
El bucle For o «para»
El bucle for es el más utilizado.
Se parece a esto:
for (Inicio; Condicion; Paso) {
// ... Cuerpo del bucle ...
}
Aprendamos el significado de estas partes con el ejemplo. El bucle a continuación se ejecuta para alert(i) de 0 hasta i (pero no incluyendo) 3:
for (let i = 0; i < 3; i++) { // muestra 0, luego 1, luego 2
alert(i);
}
Examinemos la declaración for parte por parte:
Partes
- Empezar i = 0 Se ejecuta una vez al entrar en el bucle.
- Condición i < 3 Comprobado antes de cada iteración de bucle, si falla, el bucle se detiene.
- Paso i++ Se ejecuta después del cuerpo en cada iteración, pero antes de la verificación de la condición.
- Cuerpo del bucle, alert(i) Corre una y otra vez mientras la condición sea veraz.
El algoritmo de bucle general funciona así:
Inicio de la ejecución
→ (si la condición → correr cuerpo y paso de carrera)
→ (si la condición → correr cuerpo y paso de carrera)
→ (si la condición → correr cuerpo y paso de carrera)
→ …
Si no está familiarizado con los bucles, tal vez le ayude volver al ejemplo y reproducir cómo se ejecuta paso a paso en un papel.
Esto es lo que sucede exactamente en nuestro caso:
// for (let i = 0; i < 3; i++) alert(i)
// comienzo de la ejecución
let i = 0
// si la condición → correr cuerpo y paso de carrera
if (i < 3) { alert(i); i++ }
// si la condición → correr cuerpo y paso de carrera
if (i < 3) { alert(i); i++ }
// si la condición → correr cuerpo y paso de carrera
if (i < 3) { alert(i); i++ }
// ...finaliza, porque ahora i == 3
Declaración de variable en línea
Aquí la variable «contador» i se declara justo en el bucle. Eso se llama una declaración de variable «en línea». Tales variables son visibles solo dentro del bucle.
for (let i = 0; i < 3; i++) {
alert(i); // 0, 1, 2
}
alert(i); // error, no such variable
En lugar de definir una variable, podemos usar una existente:
let i = 0;
for (i = 0; i < 3; i++) { // utilizar una variable existente
alert(i); // 0, 1, 2
}
alert(i); // 3, visible, pero declarada fuera del bucle
Saltando partes
Cualquier parte del for puede ser omitida.
Por ejemplo, podemos omitir inicio si no necesitamos hacer nada en el inicio del ciclo.
Como aquí:
let i = 0; // ya hemos declarado y asignado
for (; i < 3; i++) { // no hay necesidad de "comenzar"
alert( i ); // 0, 1, 2
}
También podemos eliminar la pieza paso:
let i = 0;
for (; i < 3;) {
alert( i++ );
}
El bucle se hizo idéntico a while (i < 3).
Podemos eliminar todo, creando así un bucle infinito:
for (;;) {
// se repite infinitas veces
}
Tenga en cuenta que los dos puntos y coma; deben estar presentes en el for, de lo contrario sería un error de sintaxis.
Rompiendo el bucle
Normalmente el bucle sale cuando la condición se vuelve falsa.
Pero podemos forzar la salida en cualquier momento.
Hay una directiva break especial para eso.
Por ejemplo, el siguiente bucle le pide al usuario una serie de números, pero se «interrumpe» cuando no se ingresa ningún número:
let sum = 0;
while (true) {
let value = +prompt("introduce un número", '');
if (!value) break; // (*)
sum += value;
}
alert( 'Sum: ' + sum );
La directiva break se activa en la línea (*) si el usuario ingresa una línea vacía o cancela la entrada. Detiene el bucle inmediatamente, pasando el control a la primera línea después del bucle. A saber, alert.
La combinación “bucle infinito + break según sea necesario” es ideal para situaciones en las que la condición debe verificarse no al principio / final del bucle, sino en el medio, o incluso en varios lugares del cuerpo.
Continuar a la siguiente iteración.
La directiva continue es una «versión más ligera» de break. No detiene todo el bucle. En su lugar, detiene la iteración actual y obliga al bucle a iniciar una nueva (si la condición lo permite).
Podemos usarlo si hemos terminado con la iteración actual y nos gustaría pasar a la siguiente.
El siguiente bucle se usa continuepara generar solo valores impares:
for (let i = 0; i < 10; i++) {
// si es cierto, omita la parte restante del cuerpo
if (i % 2 == 0) continue;
alert(i); // 1, luego 3, 5, 7, 9
}
Para los valores pares de i se usa la directiva continue, se detiene la ejecución del cuerpo, pasando el control a la siguiente iteración de for (con el siguiente número). Así que alert solo se llama para valores impares.
La directiva continue ayuda a disminuir el nivel de anidación.
Un bucle que muestra valores impares podría verse así:
for (let i = 0; i < 10; i++) {
if (i % 2) {
alert( i );
}
}
Desde un punto de vista técnico, es idéntico al ejemplo anterior. Seguramente, podemos simplemente envolver el código en el bloque if en lugar de continue.
