• Anterior
• Siguiente

Los bucles ofrecen una forma rápida y sencilla de hacer algo repetidamente. Este capítulo de laGuía de JavaScript presenta las diferentes declaraciones de iteración disponibles para JavaScript.

Puedes pensar en un bucle como una versión computarizada del juego en la que le dices a alguien que déX pasos en una dirección y luegoY pasos en otra. Por ejemplo, la idea "Ve cinco pasos hacia el este" se podría expresar de esta manera como un bucle:

for (let step = 0; step < 5; step++) {  // Se ejecuta 5 veces, con valores del paso 0 al 4.  console.log("Camina un paso hacia el este");}

Hay muchos diferentes tipos de bucles, pero esencialmente, todos hacen lo mismo: repiten una acción varias veces. (¡Ten en cuenta que es posible que ese número sea cero!).

Los diversos mecanismos de bucle ofrecen diferentes formas de determinar los puntos de inicio y terminación del bucle. Hay varias situaciones que son fácilmente atendidas por un tipo de bucle que por otros.

Las declaraciones para bucles proporcionadas en JavaScript son:

• Declaración for
• Declaración do...while
• Declaración while
• Declaración labeled
• Declaración break
• Declaración continue
• Declaración for...in
• Declaración for...of

Declaraciónfor

Un ciclofor se repite hasta que una condición especificada se evalúe comofalse. El buclefor de JavaScript es similar al buclefor de Java y C.

Una declaraciónfor tiene el siguiente aspecto:

for ([expresiónInicial]; [expresiónCondicional]; [expresiónDeActualización])  instrucción

Cuando se ejecuta un buclefor, ocurre lo siguiente:

1. Se ejecuta la expresión de iniciaciónexpresiónInicial, si existe. Esta expresión normalmente inicia uno o más contadores de bucle, pero la sintaxis permite una expresión de cualquier grado de complejidad. Esta expresión también puede declarar variables.
2. Se evalúa la expresiónexpresiónCondicional. Si el valor deexpresiónCondicional es verdadero, se ejecutan las instrucciones del bucle. Si el valor decondición es falso, el buclefor termina. (Si la expresióncondición se omite por completo, se supone que la condición es verdadera).
3. Se ejecuta lainstrucción. Para ejecutar varias instrucciones, usa una declaración de bloque ({ ... }) para agrupar esas declaraciones.
4. Si está presente, se ejecuta la expresión de actualizaciónexpresiónDeActualización.
5. El control regresa al paso 2.

Ejemplo

En el siguiente ejemplo, la función contiene una instrucciónfor que cuenta el número de opciones seleccionadas en una lista de desplazamiento (el elemento<select> de HTML representa un control que proporciona un menú de opciones que permite múltiples selecciones). La instrucciónfor declara la variablei y la inicia a0. Comprueba quei es menor que el número de opciones en el elemento<select>, realiza la siguiente instrucciónif e incrementai después de cada pasada por el bucle.

<form name="selectForm">  <p>    <label for="musicTypes"      >Elija algunos tipos de música, luego haga clic en el botón de      abajo:</label    >    <select name="musicTypes" multiple="multiple">      <option selected="selected">R&B</option>      <option>Jazz</option>      <option>Blues</option>      <option>New Age</option>      <option>Classical</option>      <option>Opera</option>    </select>  </p>  <p><input type="button" value="¿Cuántos están seleccionados?" /></p></form><script>  function howMany(selectObject) {    let numberSelected = 0;    for (let i = 0; i < selectObject.options.length; i++) {      if (selectObject.options[i].selected) {        numberSelected++;      }    }    return numberSelected;  }  let btn = document.getElementById("btn");  btn.addEventListener("click", function () {    alert(      "Número de opciones seleccionadas: " +        howMany(document.selectForm.musicTypes),    );  });</script>

Declaracióndo...while

La instruccióndo...while se repite hasta que una condición especificada se evalúe como falsa.

Una declaracióndo...while tiene el siguiente aspecto:

do  expresiónwhile (condición);

exposición siempre se ejecuta una vez antes de que se verifique la condición. (Para ejecutar varias instrucciones, usa una declaración de bloque ({ ... }) para agrupar esas declaraciones).

Sicondición estrue, la declaración se ejecuta de nuevo. Al final de cada ejecución, se comprueba la condición. Cuando la condición esfalse, la ejecución se detiene y el control pasa a la declaración que sigue ado...while.

Ejemplo

En el siguiente ejemplo, el bucledo itera al menos una vez y se repite hasta quei ya no sea menor que5.

let i = 0; do { i += 1; console.log(i); } while (i < 5);

Declaraciónwhile

Una declaraciónwhile ejecuta sus instrucciones siempre que una condición especificada se evalúe comotrue. Una instrucciónwhile tiene el siguiente aspecto:

while (condición)  expresión

Si lacondición se vuelvefalse, lainstrucción dentro del bucle se deja de ejecutar y el control pasa a la instrucción que sigue al bucle.

La prueba de condición ocurreantes de que se ejecute laexpresión en el bucle. Si la condición devuelvetrue, se ejecuta laexpresión y lacondición se prueba de nuevo. Si la condición devuelvefalse, la ejecución se detiene y el control se pasa a la instrucción que sigue awhile.

Para ejecutar varias instrucciones, usa una declaración de bloque ({ ... }) para agrupar esas declaraciones.

Ejemplo 1

El siguiente ciclo delwhile se repite siempre quen sea menor que3:

let n = 0;let x = 0;while (n < 3) {  n++;  x += n;}

Con cada iteración, el bucle incrementan y agrega ese valor ax. Por lo tanto,x yn toman los siguientes valores:

• Después de la primera pasada:n =1 yx =1
• Después de la segunda pasada:n =2 yx =3
• Después de la tercera pasada:n =3 yx =6

Después de completar la tercera pasada, la condiciónn < 3 ya no estrue, por lo que el bucle termina.Ejemplo 2

Evita los bucles infinitos. Asegúrate de que la condición en un bucle eventualmente se convierta enfalse; de lo contrario, el bucle nunca terminará. Las declaraciones en el siguiente buclewhile se ejecutan indefinidamente porque la condición nunca se vuelvefalse:

// ¡Los bucles infinitos son malos!while (true) {  console.log("¡Hola, mundo!");}

Declaraciónlabeled

Unalabel proporciona una instrucción con un identificador que te permite hacer referencia a ella en otra parte de tu programa. Por ejemplo, puedes usar una etiqueta para identificar un bucle y luego usar las declaracionesbreak ocontinue para indicar si un programa debe interrumpir el bucle o continuar su ejecución.La sintaxis de la instrucción etiquetada es similar a la siguiente:label : instrucción

El valor delabel puede ser cualquier identificador de JavaScript que no sea una palabra reservada. Ladeclaración que identifica a una etiqueta puede ser cualquier enunciado.

Ejemplo

En este ejemplo, la etiquetamarkLoop identifica un buclewhile.

markLoop: while (theMark === true) { doSomething(); }

Declaraciónbreak

Usa la instrucciónbreak para terminar un bucle,switch o junto con una declaración etiquetada.

• Cuando usasbreak sin una etiqueta, inmediatamente termina elwhile,do-while,for oswitch y transfiere el control a la siguiente declaración.
• Cuando usasbreak con una etiqueta, termina la declaración etiquetada especificada.

La sintaxis de la instrucciónbreak se ve así:

break;break [label];

1. La primera forma de la sintaxis termina el bucle envolvente más interno o elswitch.
2. La segunda forma de la sintaxis termina la instrucción etiquetada específica.

Ejemplo 1

El siguiente ejemplo recorre en iteración los elementos de un arreglo hasta que encuentra el índice de un elemento cuyo valor estheValue:

for (let i = 0; i < a.length; i++) {  if (a[i] === theValue) {    break;  }}

Ejemplo 2: romper una etiqueta

let x = 0;let z = 0;labelCancelLoops: while (true) {  console.log("Bucles externos: " + x);  x += 1;  z = 1;  while (true) {    console.log("Bucles internos: " + z);    z += 1;    if (z === 10 && x === 10) {      break labelCancelLoops;    } else if (z === 10) {      break;    }  }}

Declaracióncontinue

La instruccióncontinue se puede usar para reiniciar unwhile,do-while,for, o declaraciónlabel.

• Cuando utilizascontinue sin una etiqueta, finaliza la iteración actual delwhile,do-while ofor y continúa la ejecución del bucle con la siguiente iteración. A diferencia de la instrucciónbreak,continue no termina la ejecución del bucle por completo. En un buclewhile, vuelve a la condición. En un buclefor, salta a laexpresión-incremento.
• Cuando usascontinue con una etiqueta, se aplica a la declaración de bucle identificada con esa etiqueta.

La sintaxis de la instruccióncontinue se parece a la siguiente:

continue [label];

Ejemplo 1

El siguiente ejemplo muestra un buclewhile con una instruccióncontinue que se ejecuta cuando el valor dei es3. Por lo tanto,n toma los valores1,3,7 y12.

let i = 0;let n = 0;while (i < 5) {  i++;  if (i === 3) {    continue;  }  n += i;  console.log(n);}//1,3,7,12let i = 0;let n = 0;while (i < 5) {  i++;  if (i === 3) {    // continue;  }  n += i;  console.log(n);}// 1,3,6,10,15

Ejemplo 2

Una declaración etiquetadacheckiandj contiene una declaración etiquetadacheckj. Si se encuentracontinue, el programa termina la iteración actual decheckj y comienza la siguiente iteración. Cada vez que se encuentracontinue,checkj reitera hasta que su condición devuelvefalse. Cuando se devuelvefalse, el resto de la instruccióncheckiandj se completa ycheckiandj reitera hasta que su condición devuelvefalse. Cuando se devuelvefalse, el programa continúa en la declaración que sigue acheckiandj.

Sicontinue tuviera una etiqueta decheckiandj, el programa continuaría en la parte superior de la declaracióncheckiandj.

let i = 0; let j = 10; checkiandj: while (i < 4) { console.log(i); i += 1; checkj: while (j > 4) { console.log(j); j -= 1; if ((j % 2) === 0) { continue checkj; } console.log(j + 'es impar.'); } console.log('i = ' + i); console.log('j = ' + j); }

Declaraciónfor...in

La instrucciónfor...in itera una variable especificada sobre todas las propiedades enumerables de un objeto. Para cada propiedad distinta, JavaScript ejecuta las instrucciones especificadas. Una declaraciónfor...in tiene el siguiente aspecto:

for (variable in objeto)  instrucción

Ejemplo

La siguiente función toma como argumento un objeto y el nombre del objeto. Luego itera sobre todas las propiedades del objeto y devuelve una cadena que enumera los nombres de las propiedades y sus valores.

function dump_props(obj, obj_name) {  let result = "";  for (let i in obj) {    result += obj_name + "." + i + " = " + obj[i] + "<br>";  }  result += "<hr>";  return result;}

Para un objetocar con propiedadesmake ymodel,result sería:

car.make = Ford;car.model = Mustang;

Arrays

Aunque puede ser tentador usar esto como una forma de iterar sobre los elementosArray, la instrucciónfor...in devolverá el nombre de sus propiedades definidas por el usuario además de los índices numéricos.

Por lo tanto, es mejor usar un buclefor tradicional con un índice numérico cuando se itera sobre arreglos, porque la instrucciónfor...in itera sobre las propiedades definidas por el usuario además de los elementos del arreglo, si modificas el objetoArray (tal como agregar propiedades o métodos personalizados).

Declaraciónfor...of

La declaraciónfor...of crea un bucle que se repite sobreobjetos iterables (incluidosArray,Map,Set, objetosarguments y así sucesivamente), invocando un bucle de iteración personalizado con declaraciones que se ejecutarán para el valor de cada distinta propiedad.

for (variable of objeto)  expresión

El siguiente ejemplo muestra la diferencia entre un buclefor...of y un buclefor...in. Mientras quefor...in itera sobre los nombres de propiedad,for...of itera sobre los valores de propiedad:

const arr = [3, 5, 7];arr.foo = "hola";for (let i in arr) {  console.log(i); // logs "0", "1", "2", "foo"}for (let i of arr) {  console.log(i); // logs 3, 5, 7}

• Anterior
• Siguiente