JavaScript para loop
Os loops podem executar um bloco de código várias vezes.
Loops JavaScript
Os loops são úteis, se você quiser executar o mesmo código várias vezes, cada vez com um valor diferente.
Muitas vezes, esse é o caso ao trabalhar com matrizes:
Em vez de escrever:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
Você pode escrever:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Diferentes tipos de loops
JavaScript suporta diferentes tipos de loops:
for- percorre um bloco de código várias vezesfor/in- percorre as propriedades de um objetofor/of- percorre os valores de um objeto iterávelwhile- percorre um bloco de código enquanto uma condição especificada é verdadeirado/while- também percorre um bloco de código enquanto uma condição especificada for verdadeira
O Loop For
O forloop tem a seguinte sintaxe:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
A instrução 1 é executada (uma vez) antes da execução do bloco de código.
A instrução 2 define a condição para executar o bloco de código.
A instrução 3 é executada (todas as vezes) após a execução do bloco de código.
Exemplo
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Do exemplo acima, você pode ler:
A instrução 1 define uma variável antes do início do loop (seja i = 0).
A instrução 2 define a condição para a execução do loop (i deve ser menor que 5).
A instrução 3 aumenta um valor (i++) cada vez que o bloco de código no loop é executado.
Declaração 1
Normalmente você usará a instrução 1 para inicializar a variável usada no loop (deixe i = 0).
Isso nem sempre é o caso, o JavaScript não se importa. A instrução 1 é opcional.
Você pode iniciar muitos valores na instrução 1 (separados por vírgula):
Exemplo
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
E você pode omitir a instrução 1 (como quando seus valores são definidos antes do início do loop):
Exemplo
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Declaração 2
Freqüentemente, a instrução 2 é usada para avaliar a condição da variável inicial.
Isso nem sempre é o caso, o JavaScript não se importa. A instrução 2 também é opcional.
Se a instrução 2 retornar true, o loop começará novamente, se retornar false, o loop terminará.
Se você omitir a instrução 2, deverá fornecer uma quebra dentro do loop. Caso contrário, o loop nunca terminará. Isso irá travar seu navegador. Leia sobre quebras em um capítulo posterior deste tutorial.
Declaração 3
Freqüentemente, a instrução 3 incrementa o valor da variável inicial.
Isso nem sempre é o caso, o JavaScript não se importa e a instrução 3 é opcional.
A instrução 3 pode fazer qualquer coisa como incremento negativo (i--), incremento positivo (i = i + 15) ou qualquer outra coisa.
A instrução 3 também pode ser omitida (como quando você incrementa seus valores dentro do loop):
Exemplo
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Escopo de loop
Usando varem um loop:
Exemplo
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
Usando letem um loop:
Exemplo
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
No primeiro exemplo, usando var, a variável declarada no loop redeclara a variável fora do loop.
No segundo exemplo, usando let, a variável declarada no loop não redeclara a variável fora do loop.
Quando leté usado para declarar a variável i em um loop, a variável i só ficará visível dentro do loop.
Loops For/Of e For/In
O for/inloop e o for/ofloop são explicados no próximo capítulo.
Enquanto Loops
O whileloop e o do/whilesão explicados nos próximos capítulos.