Bucles anidados en Javascript

  • Por
  • 10 de diciembre de 2001
  • Valoración:
  • 5 Comentarios
  • Javascript
Explicamos lo que es un bucle anidado, cómo funcionan y para qué sirven. Vemos algunos ejemplos.
En el Manual de Javascript hemos recorrido ya diversos artículos para hablar de bucles. En este momento no debería haber ningún problema para poder crear los distintos tipos de bucles sin problemas, no obstante, queremos dedicar un artículo completo a tratar acerca de uno de los usos más habituales de los bucles, que podremos encontrar cuando estemos haciendo programas más complejos: la anidación de bucles.

Anidar un bucle consiste en meter ese bucle dentro de otro. La anidación de bucles es necesaria para hacer determinados procesamientos un poco más complejos que los que hemos visto en los ejemplos anteriores. Si en vuestra experiencia como programadores los habéis anidado un bucle todavía, tener certeza que más tarde o temprano os encontraréis con esa necesidad.

Un bucle anidado tiene una estructura como la que sigue. Vamos a tratar de explicarlo a la vista de estas líneas:

for (i=0;i<10;i++){
    for (j=0;j<10;j++) {
    document.write(i + "-" + j)
    }
}


La ejecución funcionará de la siguiente manera. Para empezar se inicializa el primer bucle, con lo que la variable i valdrá 0 y a continuación se inicializa el segundo bucle, con lo que la variable j valdrá también 0. En cada iteración se imprime el valor de la variable i, un guión ("-") y el valor de la variable j, como las dos variables valen 0, se imprimirá el texto "0-0" en la página web.

Debido al flujo del programa en esquemas de anidación como el que hemos visto, el bucle que está anidado (más hacia dentro) es el que más veces se ejecuta. En este ejemplo, para cada iteración del bucle más externo el bucle anidado se ejecutará por completo una vez, es decir, hará sus 10 iteraciones. En la página web se escribirían estos valores, en la primera iteración del bucle externo y desde el principio:

0-0
0-1
0-2
0-3
0-4
0-5
0-6
0-7
0-8
0-9

Para cada iteración del bucle externo se ejecutarán las 10 iteraciones del bucle interno o anidado. Hemos visto la primera iteración, ahora vamos a ver las siguientes iteraciones del bucle externo. En cada una acumula una unidad en la variable i, con lo que saldrían estos valores.

1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9

Y luego estos.

2-0
2-1
2-2
2-3
2-4
2-5
2-6
2-7
2-8
2-9

Así hasta que se terminen los dos bucles, que sería cuando se alcanzase el valor 9-9.

Veamos un ejemplo muy parecido al anterior, aunque un poco más útil. Se trata de imprimir en la página las todas las tablas de multiplicar. Del 1 al 9, es decir, la tabla del 1, la del 2, del 3...

for (i=1;i<10;i++){
    document.write("<br><b>La tabla del " + i + ":</b><br>")
    for (j=1;j<10;j++) {
       document.write(i + " x " + j + ": ")
       document.write(i*j)
       document.write("<br>")
    }
}


Con el primer bucle controlamos la tabla actual y con el segundo bucle la desarrollamos. En el primer bucle escribimos una cabecera, en negrita, indicando la tabla que estamos escribiendo, primero la del 1 y luego las demás en orden ascendente hasta el 9. Con el segundo bucle escribo cada uno de los valores de cada tabla. Se puede ver el ejemplo en marcha en este enlace.

Nota: Veremos más cosas con bucles anidados en capítulos posteriores, aunque si queremos adelantarnos un poco para ver un nuevo ejemplo que afiance estos conocimientos podemos ir viendo un ejemplo en el Taller de Javascript sobre bucles anidados, donde se construye la tabla con todos los colores puros en definiciones de 256 colores.

Con este artículo más bien práctico sobre anidación de bucles, terminamos el tema de las estructuras de control. Ahora pasaremos a otra sección de este Manual de Javascript, en la que trataremos sobre las funciones.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Alejandro

08/6/2009
Error!
Wenas, me podeis ayudar a encontrar el fallo en este scrip?

<SCRIPT>
vc = 4
for (i=0;(i<=1 && c >=1);i++){
for (j=0;(j<=1 && c >=2);j++){
for (a=0;(a<=1 && c >=3);a++){
for (b=0;(b<=1 && c >=4);b++){
for (z=0;(z<=1 && c >=5);z++){
for (d=0;(d<=1 && c >=6);d++){
for (f=0;(f<=1 && c >=7);f++){
for (g=0;(g<=1 && c >=8);g++){
document.write(i,j,a,b,z,d,f,g,"<br>")
}
}
}
}
}
}
}
}
</SCRIPT>

Se produce este error:

An error occurred on line 3:
for (i=0;(i<=1 && c >=1);i++){
Script failed.

salu2!

Alejandro

08/6/2009
Error 2!
Wenas, me podeis ayudar a encontrar el fallo en este scrip?

<SCRIPT>
c = 4
for (i=0;(i<=1 && c >=1);i++){
for (j=0;(j<=1 && c >=2);j++){
for (a=0;(a<=1 && c >=3);a++){
for (b=0;(b<=1 && c >=4);b++){
for (z=0;(z<=1 && c >=5);z++){
for (d=0;(d<=1 && c >=6);d++){
for (f=0;(f<=1 && c >=7);f++){
for (g=0;(g<=1 && c >=8);g++){
document.write(i,j,a,b,z,d,f,g,"<br>")
}
}
}
}
}
}
}
}
</SCRIPT>

Se produce este error:

An error occurred on line 3:
for (i=0;(i<=1 && c >=1);i++){
Script failed.

PD: Vuelvo a poner el script ya que se modifico la variable c sin querer al copiarlo.

salu2!

klaudersen

15/9/2010
bucles anidadas
no veo las negritas en el ejemplo de bucles, se ven letras normales.-

@ferchumalo

18/10/2010
Re: encontrar el error
Corrí el script y me escribió correctamente, nada más que está mal inicializada la variable C.
Fijate que nunca se ejecutaría el for for (z=0;(z<=1 && c >=5);z++) ya que C es igual a 4.

NaldoRck

24/1/2012
Problema - Inicializacion Incorrecta de la variable "c"
la variable "c" en tu código la tienes inicializada en 4 (c=4) Por lo que nunca llegaran a cumplirse todo los ciclos y nunca se imprimirán los números en pantalla.
Te Recomiendo inicializarla en 8 (c=8).

<SCRIPT>
c = 8;
for (i=0;(i<=1 && c >=1);i++){
for (j=0;(j<=1 && c >=2);j++){
for (a=0;(a<=1 && c >=3);a++){
for (b=0;(b<=1 && c >=4);b++){
for (z=0;(z<=1 && c >=5);z++){
for (d=0;(d<=1 && c >=6);d++){
for (f=0;(f<=1 && c >=7);f++){
for (g=0;(g<=1 && c >=8);g++){
document.write(i,j,a,b,z,d,f,g,"<br>");
}
}
}
}
}
}
}
}
</SCRIPT>

Compartir