Como Usar Arrays com Laços FOR JavaScript

Neste tutorial de nossa seção sobre Arrays em JavaScript, vamos aprender como usar, de fato, eles, os vetores. E vamos aprender com exemplos de seu uso mais comum, com laços FOR.

Fazer download da Apostila JavaScript Progressivo (PDF)

Como usar Arrays com Laços

Como já explicamos nos tutoriais passados, a grande vantagem e o diferencial de trabalharmos com vetores, é a possibilidade de lidarmos com uma grande quantidade de informação.

É muito comum definirmos um array com 100, 200, mil variáveis dentro dela.

Pode ser desde pequenas strings com as senhas de cada cliente de um site, ou mesmo cada variável ser um bloco enorme de informação, como no caso de um cadastro.

Então, é bem razoável de pensar que, para se trabalhar com grandes quantidades de algo, devemos usar laços para tais propósitos.

Você pode usar um laço FOR para percorrer todos os items do carrinho de um site de compras, por exemplo, então somar o preço e obter o valor final da compra. Vamos dar alguns exemplos de uso de arrays com laços FOR !

Exemplo de uso de Array

Crie um script que declara um array de 10 posições.
Inicialize cada elemento com o valor de seu índice.

Vamos chamar nosso array de vetor. Para declarar ele:
var vetor = new Array(10);

Agora, queremos inicializar seus elementos com os seguintes valores:
vetor[0] = 0
vetor[1] = 1
...

Ou seja:
vetor[i] = i;

Ora, fazemos isso com o seguinte laço:
for (let count=0 ; count < vetor.length ; count++)
vetor[count] = count;

Dois detalhes:

O let, é tipo um var, mas temporário. Ele declara a variável somente no escopo daquele bloco, ou seja, ela só existe no laço for e depois deixa de existir (é liberada da memória)
Poderíamos usar count < 10 como teste condicional, mas ao invés de 10, é SEMPRE melhor usarmos vetor.length, pois ele vai pegar o tamanho do array (seja ele 10, 100, 1 milhão ...)...assim você nem precisa mexer no código.

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="main()">
 </body>
</html>

PS: Note que fizemos:

Isso quer dizer: quando for exibir o que tem na tag <body>, chame a função main() do JavaScript.

script.js:

function main()
{
 var vetor = new Array(10);

 for(let count=0; count<vetor.length ; count++)
  vetor[count] = count;

 document.write(vetor);
}

O resultado é:

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

Exemplo de uso de Arrays

Crie um array com 101 posições. Cada elemento deve conter o quadrado de seu índice.

Ou seja: 0, 1, 4, 9, 16, 25, 36, ..., 10000

Exiba eles de uma maneira organizada:

Posição 0 = 0

Posição 1 = 1

Posição 2 = 4

Posição 3 = 9

Posição 4 = 16

....

Vamos usar dois laços FOR.

No primeiro, preenchemos todas as 101 posições do vetor com:

vetor[count] = count * count;

Depois, usamos um outro laço FOR para exibir cada elemento, um em cada linha.

Veja como fica nossa função main():

function main()
{
   var vetor = new Array(101);

   for(let count=0; count<vetor.length ; count++)
 vetor[count] = count * count;
 
   for(let count=0 ; count<vetor.length ; count++)
 document.write("Posição "+count+" : "+vetor[count]+"<br />");
 
}

Você pode ainda fazer tudo num laço FOR apenas:

function main()
{
   var vetor = new Array(101);

   for(let count=0; count<vetor.length ; count++){
 vetor[count] = count * count;
 document.write("Posição "+count+" : "+vetor[count]+"<br />");
   }
}

JavaScript Progressivo