Loops For e For/In
Loops são estruturas de repetição de comandos. Se quisermos, por exemplo, repetir o mesmo comando cinco vezes, não precisamos escrevê-lo as cinco vezes, podemos escrevê-lo apenas uma vez dentro de um loop.
Podemos usar também os loops para percorrer todos os elementos de arrays e objetos e realizar comandos sobre cada um deles. Estes comandos só precisarão ser escritos uma vez, não importa o tamanho do array ou do objeto. Isto nos abrirá incríveis possibilidades, conforme vamos ver logo mais.
Loop For
for (var a = 0; a < 5 ; a++) {
console.log(a);
} // assim como as funções, não é preciso ponto e vírgula ao final dos loops
/* O console mostrará:
0
1
2
3
4
*/
Note que ao iniciar o loop for usamos três comandos dentro dos parênteses, separados por ponto e vírgula. Entre as chaves { } escrevemos os comandos que queremos repetir, assim como fazemos com as funções.
Sobre os comandos que estão entre parênteses na estrutura do loop for:
- var a = 0: O primeiro comando passado no loop for é executado uma vez antes de começar o loop. Neste caso criamos uma variável com valor zero.
- a < 5: O segundo comando é uma condição que precisa ser atendida para que o loop continue sendo executado. Lembra-se da aula em que falamos de booleanos? No início deste loop, a variável a vale zero, portanto o teste a < 5 retorna true, então os comandos do loop são executados. Depois que os comandos forem executados, o loop será avaliado outra vez e assim repetidamente. Quando este teste retornar false, o loop é interrompido.
- a++: O terceiro comando é executado sempre ao final de cada passagem no loop, por isso utilizamos ele para incrementar a variável a.
Usando o loop for para percorrer elementos de um array
Para percorrer arrays usando o loop for, usaremos a propriedade length do array para controlar quando deve acabar o loop.
var alunos = ['Pedro', 'Maria', 'José', 'João', 'Carlos'];
for (var a = 0; a < alunos.length ; a++) {
console.log(alunos[a]);
}
/* O console mostrará:
Pedro
Maria
José
João
Carlos
*/
Loop For/In
O loop for/in serve para facilmente percorrermos elementos de um objeto, já que este tipo de dados não possui índices e portanto não pode ser percorrido com um loop for como os arrays.
O funcionamento dele é bem simples. Consideremos um objeto de alunos, cujas chaves são as matrículas e os valores são os nomes dos alunos.
Para iniciar o loop for/in criamos uma variável chamada matr. O loop então vai percorrer todos os elementos do objeto e a cada passagem a variável matr vai ser igual a chave do elemento. Sendo assim, temos acesso tanto à matrícula por meio desta variável quanto ao nome do aluno, usando a notação alunos[matr].
var carro = {
'Ano': 2018,
'Modelo': 'Fox',
'Cilindradas': '1.8',
'Combustível': 'Gasolina'
}
for (var prop in carro) {
console.log( prop + ': ' + carro[prop] );
}
/* O console mostrará:
Ano: 2018
Modelo: Fox
Cilindradas: 1.8
Combustível: Gasolina
*/
Loops e os métodos getElementBy...
Vamos ver agora um exemplo de como poderíamos usar um loop para alterar o css de todos os elementos abaixo que tem a classe "exemplo":
<div class="exemplo">Elemento 1</div>
<div class="exemplo">Elemento 2</div>
<div class="exemplo">Elemento 3</div>
var elementos = document.getElementsByClassName("exemplo");
for (var a = 0; a < elementos.length ; a++) {
exs[a].style.color = "orange";
exs[a].style['font-weight'] = "bold";
}