JavaScript para loop
Exemplo
Faça um loop (itere sobre) um bloco de código cinco vezes:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Faça um loop (itere sobre) um array para coletar nomes de carros:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- O loop começa na posição 0 (
let i = 0). - O loop é incrementado automaticamente
ipara cada execução. - O loop é executado enquanto
i < cars.length.
Mais exemplos abaixo.
Definição e uso
A forinstrução define um bloco de código que é executado enquanto uma condição for
true.
Observação
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.Veja também:
Sintaxe
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Parâmetros
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
Instruções de loop JavaScript
| Declaração | Descrição | |
| pausa | Sai de um loop | |
| Prosseguir | Ignora um valor em um loop | |
| enquanto | Faz um loop em um bloco de código enquanto uma condição é verdadeira | |
| fazer enquanto | Faz um loop em um bloco de código uma vez e, em seguida, enquanto uma condição for verdadeira | |
| por | Faz um loop em um bloco de código enquanto uma condição é verdadeira | |
| para de | Faz um loop nos valores de qualquer iterável | |
| para... em | Faz um loop nas propriedades de um objeto |
Mais exemplos
Inicie vários valores no primeiro parâmetro:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Omita os primeiros parâmetros (defina os valores antes do início do loop):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Use continue- Faça um loop em um bloco de código, mas pule o valor 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Use break- Faça um loop em um bloco de código, mas saia do loop quando i == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Omita o segundo parâmetro.
Use breakpara sair do loop, caso contrário o loop nunca terminará e seu navegador travará:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Faça um loop sobre uma matriz em ordem decrescente (incremento negativo):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Omita o último parâmetro e incremente os valores dentro do loop:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Faça um loop em um NodeList e altere a cor de todos os elementos p na lista:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Um loop aninhado (um loop dentro de um loop):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Suporte ao navegador
for é um recurso ECMAScript1 (ES1).
ES1 (JavaScript 1997) é totalmente suportado em todos os navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |