Control: Bucles e iteradores

Si queremos repetir un bloque de instrucciones varias veces podríamos escribir el bloque varias veces , pero si queremos repetirlo un número varable de veces esa solución no es viable. Por ejemplo recorrer los elementos de una lista de longitud variable.

Aunque eso de escribir el mismo código varias veces no está dentro de las buenasa prácticas en la programación.

bucles en javascript

Para solucionarlo tenemos la sentencias de bucles. En esencia la ejecución de un bucle en un programa consiste en ejecutar repetidas veces un bloque de instrucciones (cuerpo del bucle) hasta que se cumpla una determinada condición, en cuyo caso se acaba la repetición y el programa continúa con su flujo normal.

Un iterador es un bucle, solo que usado para recorrer el contenido de objetos iterables, por ejemplo un array, set y otros que puedan crearse en el programa. La condición para acabar el bucle en un iterador no se ve, pero está implicita en la instrucción.

Cualquier bucle puede detenerse mediante la instrucción break, fuerza la salida del bucle.

Y una repetición o iteración del bucle pude forzarse medinate la instrucción continue, salta la iteracción actual y pasa a la siguiente.

Al utilizar bucles como do..until or while, debemos tener sumo cuidado para evitar entrar en un ciclo sin fin. Es decir ahy que asegurarse que la condición de salida siempre se va a alcanzar.

Si tenemos alguna duda o existe alguna posibilidad de que el bucle entre en un ciclo sin fin debemos agregar alguna manera de asegurar que se alcanza alguna condicióon de salida.

Existen varias sentencias de bucles: 

Notas

Un uso de break: vamos a recorrer una lista de números hasta encontar en num 0 y paramos.

var lista = [1,2, 3,4,0,5,6,7];

for(var ind = 0; ind < lista.length; ind++){

      if (lista[ind] == 0)

          break;

      console.log(lista[ind]);

}

console.log("Primer cero en la posición " + ind)

Como ves break significa acabar todo el bucle y no repetir.

Ahora vamos a recorrer una lsita pero saltándonos el 0.

var lista = [1,2, 3,4,0,5,6,7];

for(var ind = 0; ind < lista.length; ind++){

      if (lista[ind] == 0)

          continue;

      console.log(lista[ind])

}

console.log("Ultima posición "+ (ind-1));

El primer caso se deja de ejecutar el bucle. En el segundo caso el bucle se salta pasos, continue significa continuar en el siguiente ciclo (cortar este ciclo solo).

While

En esta estructura primero comprueba la condición: si es cierta pasa a ejecutar el cuerpo del bucle, y si es falsa pasa a la instrucción siguiente a la sentencia while.

Se leería: mientras condición sea cierta ejecuta el cuerpo

Como siempre un ejemplo lo aclarará todo:

var lista = new Array(10);

var ind=0;

while (ind < lista.length){

       lista[ind] = '0';

       ind++;       

}

En este ejemplo mientras que el valor almacenado en ind sea menor que 10 (la longitud del array ) irá almacenando en cada elemento del array lista un 0 e incrementando el valor de ind.

Cuando ind sea 10 el programa no entrará en el cuerpo del bucle y seguirá con su ejecución.

Si no se incrementara el valor de ind el bucle no acabaría nunca, el programa quedaría ejecutando indefinidamente el cuerpo del bucle.

Ejemplo

Por ejemplo en este bucle vamos a generar una lista con los 20 primeros números pares

var nums, cont=0;

nums = new Array();

while (cont <20){

     nums[cont] = 2*nums[cont];

     cont++;

     }

console.log(nums);

Do.. while

Se trata de un bucle en el que la condición se comprueba después de la primera iteración, es decir que el cuerpo del bucle se ejecuta al menos una vez.

Puedes leerla como haz esto mientras que la condición se cumpla.

En este ejemplo vamos a buscar el máximo valor de una lista numérica

var lista = new Array(1,3,5,16,9,11,3, 12);

var ind=0, max=0;

do{

       if (lista[ind] > max)

             max = lista[ind];

       ind++;

}while (ind < lista.length)
console.log("El máximo es "+max);

Este código pndría a cero cada elemento del la lista.

Cuidado con el uso de llaves: no olvides ponerlas, otros lenguajes consideran que do y while es suficienta para señalar el bucle. Con Javascript no, el bloque hay que maracarlo con las llaves.

Y fíjate que si ind no se incrementara, el bucle nunca acabaría.

Ejemplo

Un ejemplo típico de bucle es averiguar si un número es primo, es decir, si solo es divisible po 1 y por si mismo.

var num, primo=true, div=2;

do{

       if ( num % div==0 || num==2){

            primo = false;

            break;

            }

            div++;

}while (div < num)

console.log(num+ " ¿Es primo? "+primo)

Todos los núemros se pueden dividir po 1 y por si mismo, así empiezo a dividir por 2 y termino uno antes que el número. Y el 2 es primo. Para otros números empiezo a dividir y cuando una división da resto 0 (es divisible) dejo de probar y salgo del bucle ¿para que seguir?. Otro ejemplo de uso de break.

for

Los bucles for son como los bucles while, pero usa un contador que se actualiza tras cada iteracción. Es muy usada para recorrer arrays.

La sentencia da un valor inicial al contador. Comprueba la condición si es cierta modifica el valor del contador según le indiquemos y ejecuta el cuerpo del bucle. Cuando la condición deja de cumplirse, sale del bucle.

Fíjate que el contador lo controlamos en la tercera parte de la instrucción de la sentencia. Podemos incrementarlo, decrementarlo, multiplicarlo... Pero siempre hay que cuidar que llegue a cumplirse la condición de salida.

Vemoas el ejemplo anterior usando esta sentencia:

var lista = new Array(10);

var ind;

for (ind=0; ind < lista.length; ind++){

       lista[ind] = '0';       

}

Como vemos el cuerpo del bucle no incrementa la variable ind, esto se indica en la cabecera de la sentencia. Este código hace exactamente lo mismo que los anteriores.

Ejemplo

Los bucles for son muyy utilizados apra el trataminnto de listas. Vamos a copiar una lista en otra

var lista = [21, 32,35,13,24];

var copia = new Array();

for (let ind =0; ind < lista.length; ind++){

       copia.push(lista[ind])       

}

console.log(lista);

console.log(copia);

 

Recorrer objetos for..in

Se trata de una variante de la sentencia for utilizada para recorrer todas las propiedades enumerables de un objeto. La variable de control del bucle toma el nombre de la propiedad.

Se usa una variable de control que en cada iteración almacena el elemento del objeto recorrido. Por ejemplo si pruebas este código podrás ver todos los elementos del objeto ficha, no sus valores.

var item;

var ficha = {

    nombre: "juan",

    edad: 23,

    nacionalidad: "española",

}

for (item in ficha)

      console.log(item);

Para ver sus valores tendrías que usar item como para acceder al objeto usando el item como si fuera un indice, entre corchetes:

var item;

var ficha = {

    nombre: "juan",

    edad: 23,

    nacionalidad: "española",

}

for (item in ficha)

      console.log(item+ ": "+ficha[item]);

Ejemplo

Voy a recorrer los elementos de un objeto para ver sus nombres

var item;

var persona = {

    nombre: "Juan",

    nacionalidad: "española",

    saludar: function(){ return "Hola, soy "+this.nombre }

    }

for (item in persona){

   console.log(item+"("+typeof(persona[item])+")") }

Iterar objetos for..of

Existen objetos iterables, es decir, que están construídos de manera que sus elementos se pueden recorrer porque poseen algún método interno que permite ir leyendo los valores de sus propiedades una tras otra.

Los iterables por defecto de Javasript son los objeto array, map y set.

Con este tipo de objetos podemos usar el bucleo for..of para leer los valores (no los índicas o claves como en for..in) del objeto recorrido

var lista = ['manzanas', 'peras','uvas','plátanos'];

for (let item of lista)

      console.log(item);

 

Ejemplo

Un recorrido de una lista de números que solo muestra números impares

var lista = [1,2, 3,4,0,5,6,7];

for(var item of lista){

      if (item % 2 != 0)

          console.log(item);

}

Selección