Bucles e iteracin

Declaracin for

Un ciclo for se repite hasta que una condicin especificada se evale como false. El bucle for de JavaScript es similar al bucle for de Java y C.

Una declaracin for tiene el siguiente aspecto:

for ([expresinInicial]; [expresinCondicional]; [expresinDeActualizacin])
  instruccin

Cuando se ejecuta un bucle for, ocurre lo siguiente:

1. Se ejecuta la expresin de iniciacin expresinInicial, si existe. Esta expresin normalmente inicia uno o ms contadores de bucle, pero la sintaxis permite una expresin de cualquier grado de complejidad. Esta expresin tambin puede declarar variables.
2. Se evala la expresin expresinCondicional. Si el valor de expresinCondicional es verdadero, se ejecutan las instrucciones del bucle. Si el valor de condicin es falso, el bucle for termina. (Si la expresin condicin se omite por completo, se supone que la condicin es verdadera).
3. Se ejecuta la instruccin. Para ejecutar varias instrucciones, usa una declaracin de bloque ({ ... }) para agrupar esas declaraciones.
4. Si est presente, se ejecuta la expresin de actualizacin expresinDeActualizacin.
5. El control regresa al paso 2.

Ejemplo

En el siguiente ejemplo, la funcin contiene una instruccin for que cuenta el nmero de opciones seleccionadas en una lista de desplazamiento (el elemento <select> de HTML representa un control que proporciona un men de opciones que permite mltiples selecciones). La instruccin for declara la variable i y la inicia a 0. Comprueba que i es menor que el nmero de opciones en el elemento <select>, realiza la siguiente instruccin if e incrementa i despus de cada pasada por el bucle.

<form name="selectForm">
  <p>
    <label for="musicTypes"
      >Elija algunos tipos de msica, luego haga clic en el botn de
      abajo:</label
    >
    <select id="musicTypes" 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 id="btn" type="button" value="Cuntos estn 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(
      "Nmero de opciones seleccionadas: " +
        howMany(document.selectForm.musicTypes),
    );
  });
</script>

Declaracin do...while

La instruccin do...while se repite hasta que una condicin especificada se evale como falsa.

Una declaracin do...while tiene el siguiente aspecto:

do
  expresin
while (condicin);

exposicin siempre se ejecuta una vez antes de que se verifique la condicin. (Para ejecutar varias instrucciones, usa una declaracin de bloque ({ ... }) para agrupar esas declaraciones).

Si condicin es true, la declaracin se ejecuta de nuevo. Al final de cada ejecucin, se comprueba la condicin. Cuando la condicin es false, la ejecucin se detiene y el control pasa a la declaracin que sigue a do...while.

Ejemplo

En el siguiente ejemplo, el bucle do itera al menos una vez y se repite hasta que i ya no sea menor que 5.

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

Declaracin while

Una declaracin while ejecuta sus instrucciones siempre que una condicin especificada se evale como true. Una instruccin while tiene el siguiente aspecto:

while (condicin)
  expresin

Si la condicin se vuelve false, la instruccin dentro del bucle se deja de ejecutar y el control pasa a la instruccin que sigue al bucle.

La prueba de condicin ocurre antes de que se ejecute la expresin en el bucle. Si la condicin devuelve true, se ejecuta la expresin y la condicin se prueba de nuevo. Si la condicin devuelve false, la ejecucin se detiene y el control se pasa a la instruccin que sigue a while.

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

Ejemplo 1

El siguiente ciclo del while se repite siempre que n sea menor que 3:

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

Con cada iteracin, el bucle incrementa n y agrega ese valor a x. Por lo tanto, x y n toman los siguientes valores:

• Despus de la primera pasada: n = 1 y x = 1
• Despus de la segunda pasada: n = 2 y x = 3
• Despus de la tercera pasada: n = 3 y x = 6

Despus de completar la tercera pasada, la condicin n < 3 ya no es true, por lo que el bucle termina.Ejemplo 2

Evita los bucles infinitos. Asegrate de que la condicin en un bucle eventualmente se convierta en false; de lo contrario, el bucle nunca terminar. Las declaraciones en el siguiente bucle while se ejecutan indefinidamente porque la condicin nunca se vuelve false:

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

Declaracin labeled

Una label proporciona una instruccin 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 declaraciones break o continue para indicar si un programa debe interrumpir el bucle o continuar su ejecucin.La sintaxis de la instruccin etiquetada es similar a la siguiente:label : instruccin

El valor de label puede ser cualquier identificador de JavaScript que no sea una palabra reservada. La declaracin que identifica a una etiqueta puede ser cualquier enunciado.

Ejemplo

En este ejemplo, la etiqueta markLoop identifica un bucle while.

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

Declaracin break

Usa la instruccin break para terminar un bucle, switch o junto con una declaracin etiquetada.

• Cuando usas break sin una etiqueta, inmediatamente termina el while, do-while, for o switch y transfiere el control a la siguiente declaracin.
• Cuando usas break con una etiqueta, termina la declaracin etiquetada especificada.

La sintaxis de la instruccin break se ve as:

break;
break [label];

1. La primera forma de la sintaxis termina el bucle envolvente ms interno o el switch.
2. La segunda forma de la sintaxis termina la instruccin etiquetada especfica.

Ejemplo 1

El siguiente ejemplo recorre en iteracin los elementos de un arreglo hasta que encuentra el ndice de un elemento cuyo valor es theValue:

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;
    }
  }
}

Declaracin continue

La instruccin continue se puede usar para reiniciar un while, do-while, for, o declaracin label.

• Cuando utilizas continue sin una etiqueta, finaliza la iteracin actual del while, do-while o for y contina la ejecucin del bucle con la siguiente iteracin. A diferencia de la instruccin break, continue no termina la ejecucin del bucle por completo. En un bucle while, vuelve a la condicin. En un bucle for, salta a la expresin-incremento.
• Cuando usas continue con una etiqueta, se aplica a la declaracin de bucle identificada con esa etiqueta.

La sintaxis de la instruccin continue se parece a la siguiente:

continue [label];

Ejemplo 1

El siguiente ejemplo muestra un bucle while con una instruccin continue que se ejecuta cuando el valor de i es 3. Por lo tanto, n toma los valores 1, 3, 7 y 12.

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

let 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 declaracin etiquetada checkiandj contiene una declaracin etiquetada checkj. Si se encuentra continue, el programa termina la iteracin actual de checkj y comienza la siguiente iteracin. Cada vez que se encuentra continue, checkj reitera hasta que su condicin devuelve false. Cuando se devuelve false, el resto de la instruccin checkiandj se completa y checkiandj reitera hasta que su condicin devuelve false. Cuando se devuelve false, el programa contina en la declaracin que sigue a checkiandj.

Si continue tuviera una etiqueta de checkiandj, el programa continuara en la parte superior de la declaracin checkiandj.

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); }

Declaracin for...in

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

for (variable in objeto)
  instruccin

Ejemplo

La siguiente funcin 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 objeto car con propiedades make y model, result sera:

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

Arrays

Aunque puede ser tentador usar esto como una forma de iterar sobre los elementos Array, la instruccin for...in devolver el nombre de sus propiedades definidas por el usuario adems de los ndices numricos.

Por lo tanto, es mejor usar un bucle for tradicional con un ndice numrico cuando se itera sobre arreglos, porque la instruccin for...in itera sobre las propiedades definidas por el usuario adems de los elementos del arreglo, si modificas el objeto Array (tal como agregar propiedades o mtodos personalizados).

Declaracin for...of

La declaracin for...of crea un bucle que se repite sobre objetos iterables (incluidos Array, Map, Set, objetos arguments y as sucesivamente), invocando un bucle de iteracin personalizado con declaraciones que se ejecutarn para el valor de cada distinta propiedad.

for (variable of objeto)
  expresin

El siguiente ejemplo muestra la diferencia entre un bucle for...of y un bucle for...in. Mientras que for...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