logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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:

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>

                    
                
Elemento 1
Elemento 2
Elemento 3
                    
                        
    var elementos = document.getElementsByClassName("exemplo");   

    for (var a = 0; a < elementos.length ; a++) {
        exs[a].style.color = "orange";
        exs[a].style['font-weight'] = "bold";
    }
                    
                

Índice de Aulas