Loops aninhados em Javascript
Explicamos o que é um loop aninhado, como funcionam e para que servem. Vemos alguns exemplos.
Aninhar um loop consiste colocar esse loop dentro de outro. O aninhamento de loops é necessário parafazerdeterminados processamentos um pouco mais complexos dos que os que vimos nos exemplos anteriores e com certeza que em sua experiência como programador já deve ter utilizado ou senão, utilizará em um futuro.
Um loop aninhado tem a estrutura como a que segue abaixo. Vamos explicá-lo através destas linhas:
for (i=0;i<10;i++){ for (j=0;j<10;j++) { document.write(i + "-" + j) } }
A execução funcionará da seguinte forma. Para começar inicia-se o primeiro loop, com o que a variável i valerá 0 e a seguir inicia-se o segundo loop, com o que a variável j valerá também 0. Em cada repetição imprime-se o valor da variável i, um hífen ("-") e o valor da variável j, como as duas variáveis valem 0, se imprimirá o texto "0-0" na páginaweb.
O loop que está aninhado (mais para dentro) é o que mais se executa, neste exemplo, para cada repetição do loop mais externo, o loop aninhado se executará por completo uma vez, ou seja, fará suas 10 repitições. Na página web se escreveriam estes valores, na primeira repetição do loop externo e desde o princípio:
0-0
0-1
0-2
0-3
0-4
0-5
0-6
0-7
0-8
0-9
Para cada repetição do loop externo se executarão as 10 repetições do loop interno ou aninhado. Vimos a primeira repetição, agora veremos as seguintes repetições do loop externo. Em cada uma acumula uma unidade na variável i, com o que sairiam estes valores.
1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9
E logo estes:
2-0
2-1
2-2
2-3
2-4
2-5
2-6
2-7
2-8
2-9
Assim até que terminem os dois loops, que seria quando se alcançasse o valor 9-9.
Vejamos um exemplo muito parecido ao anterior, embora um pouco mais útil. Trata-se de imprimir na página todas as tabelas multiplicar. Do 1 ao 9, ou seja, a tabela do 1, a do 2, do 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>") } }
Com o primeiro loop controlamos a tabela atual e com o segundo loop a desenvolvemos. No primeiro loop escrevemos um título, em negrito, indicando a tabela que estamos escrevendo, primeiro a do 1 e logo as outras em ordem crescente até o 9. Com o segundo loop escrevo cada um dos valores de cada tabela. Pode-sever o exemplo em funcionamento neste link.