Os loops podem executar um bloco de código várias vezes.
Loops são úteis, se você quiser executar o mesmo código repetidamente, cada um tempo com um valor diferente.
Muitas vezes este é o caso quando se trabalha com arrays:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript oferece suporte a diferentes tipos de loops:
for - percorre um bloco de código várias vezes
for/in - percorre as propriedades de um objeto
for/of - percorre os valores de um objeto iterável
while - percorre um bloco de código enquanto uma condição especificada é verdadeira
do/while - também percorre um bloco de código enquanto uma condição especificada é verdadeira
forA instrução for cria um loop com 3 expressões opcionais:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}A Expressão 1 é executada (uma vez) antes da execução do bloco de código.
Expressão 2 define a condição para execução do bloco de código.
A Expressão 3 é executada (sempre) após a execução do bloco de código.
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
No exemplo acima, você pode ler:
A expressão 1 define uma variável antes do início do loop (seja i=0).
A expressão 2 define a condição para a execução do loop (i deve ser menor que 5).
A expressão 3 aumenta um valor (i++) cada vez que o bloco de código no loop tem foi executado.
Normalmente você usará a expressão 1 para inicializar a variável usada no loop (seja i=0).
Isso não é sempre o caso. JavaScript não se importa. A expressão 1 é opcional.
Você pode iniciar vários valores na expressão 1 (separados por vírgula):
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
E você pode omitir a expressão 1 (como quando seus valores são definidos antes do loop começar):
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Freqüentemente, a expressão 2 é usada para avaliar a condição da variável inicial.
Isso não é sempre o caso. JavaScript não se importa. A expressão 2 é também opcional.
Se a expressão 2 retornar verdadeira, o loop será reiniciado. Se retornar falso, o o loop terminará.
Se você omitir a expressão 2, deverá fornecer uma quebra dentro do laço. Caso contrário, o loop nunca terminará. Isso travará seu navegador. Leia sobre interrupções em um capítulo posterior deste tutorial.
Freqüentemente, a expressão 3 incrementa o valor da variável inicial.
Isso não é sempre o caso. JavaScript não se importa. A expressão 3 é opcional.
A expressão 3 pode fazer qualquer coisa como incremento negativo (i--), positivo incremento (i=i + 15) ou qualquer outra coisa.
A expressão 3 também pode ser omitida (como quando você incrementa seus valores dentro do loop):
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Usando var em um loop:
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
Usando let em um loop:
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
No primeiro exemplo, usando var, a variável declarada em o loop redeclara a variável fora do loop.
No segundo exemplo, usando let, a variável declarada em o loop não declara novamente a variável fora do loop.
Quando let é usado para declarar a variável i em um loop, o i variável só será visível dentro do loop.
For/Of e For/InO loop for/in e o loop for/of são explicados no próximo capítulo.
while LoopsO loop while e o do/while são explicados nos próximos capítulos.