Curso IT Fundamentos JavaScript 042_Loops while、for

Instruções de loop são métodos usados para executar repetidamente um bloco de código. JavaScript fornece diferentes tipos de instruções de loop como while, do-while, for, etc. Um corpo de loop completo inclui: expressão de inicialização, condição de loop e iterador.

Loop `while`

O loop while é usado para executar repetidamente um bloco de código quando a condição é true. A execução única do corpo do loop é chamada de uma iteração. Qualquer expressão ou variável pode ser uma condição de loop, a condição de loop será calculada e o resultado será convertido em um valor booleano. Semelhante ao if, se o corpo do loop tiver apenas uma instrução, você também pode omitir as chaves {…}, mas isso não é recomendado. A condição é verificada antes de cada iteração.

Exemplo:

1
let i = 0; // Expressão de inicialização, geralmente usada para declarar variável contador, sem ela ocorrerá erro undefined
2
while (i < 5) { // Condição de loop, se for `true`, o loop continuará executando
3
  console.log(i);
4
  i++; // Iterador, geralmente usado para atualizar a variável contador, correspondendo à condição de loop
5
}

Exemplo de loop infinito:

1
let i = 0;
2
  while (1) { // Condição sempre true entrará em loop infinito
3
    console.log(i);
4
    i++; // Geralmente usa esta forma de atualização do contador para a condição de loop
5
    if (i >= 5) break;  // Comentar esta linha entra em modo de loop infinito
6
}

Loop `do-while`

O loop do-while é semelhante ao loop while, mas ele executa o corpo do loop uma vez primeiro e depois verifica se a condição é true. Se a condição for verdadeira, continua executando o corpo do loop. É necessário prestar atenção ao cenário de uso. Use do-while apenas quando for necessário executar o corpo do loop pelo menos uma vez, independentemente de a condição ser verdadeira ou não. Para outros cenários, recomenda-se o loop while. A condição é verificada após cada iteração.

Exemplo:

1
let i = 0;
2
do {
3
  console.log(i);
4
  i++;
5
} while (i < 5);

Loop `for`

O loop for é uma estrutura de loop mais complexa, mas também a mais comumente usada, utilizada para executar repetidamente um bloco de código. O loop for contém três partes: expressão de inicialização, condição de loop e iterador. A seguir está a sintaxe básica do loop for: A condição é verificada antes de cada iteração, e outras configurações podem ser usadas.

Exemplo:

1
for (let i = 0; i < 5; i++) {
2
  console.log(i);
3
}

Exemplo de loop infinito:

1
let i = 0;
2
  for ( ; ; ) { // Omitir todas as condições entrará em loop infinito
3
    console.log(i);
4
    i++; // Geralmente usa esta forma de atualização do contador para a condição de loop
5
  if (i >= 5) break;  // Comentar esta linha entra em modo de loop infinito
6
}

Omitindo segmentos de instrução

O loop for pode omitir qualquer um ou mais da expressão de inicialização, condição de loop ou iterador, mas o ponto e vírgula ; deve ser mantido. O ponto e vírgula é usado para separar cada parte, quando uma parte é omitida, o ponto e vírgula correspondente ainda precisa ser mantido.

Exemplo:

1
let x = 0;
2
for (; x < 5; x++) {
3
  console.log(x);
4
}
5
// Omite a expressão de inicialização, movendo-a para fora do loop, o loop ainda é válido
6

7
let y = 0;
8
for (;; y++) {
9
  if (y >= 5) {
10
    break;
11
  }
12
  console.log(y);
13
}
14
// Omite a condição de loop, terminando o loop através da instrução `if` e `break`
15

16
let z = 0;
17
for (; z < 5;) {
18
  console.log(z);
19
  z++;
20
}
21
// Omite o iterador, o iterador é movido para dentro do corpo do loop, o loop ainda é válido

Loops aninhados

Loop aninhado refere-se a incluir outra estrutura de loop completa dentro do corpo de um loop. O loop aninhado executa o loop interno uma vez a cada execução do loop externo.

Exemplo de triângulo regular:

1
// Exemplo A
2
for (let i = 1; i <= 5; i++) { // Loop externo, controla o número de linhas, de 1 a 5.
3
  let row = ''; // A cada execução do loop externo, cria uma string vazia `row`, usada para armazenar as estrelas da linha atual.
4
  for (let j = 1; j <= i; j++) { // Loop interno, controla o número de estrelas em cada linha, de 1 ao número da linha atual `i`.
5
    row += '⭐ '; // Adiciona estrela a `row`, formando a string de estrelas da linha atual.
6
  }
7
  console.log(row); // Exibe a string de estrelas da linha atual.
8
}

1
// Exemplo B
2
for (let i = 1; i <= 5; i++) { // Loop externo representa o número de linhas
3
    for (let j = 1; j <= i; j++) { // Loop interno representa as colunas
4
        document.write('⭐'); // Usa estrela como elemento gráfico
5
    }
6
    document.write('</br>'); // Quebra de linha
7
}

Exemplo de triângulo invertido:

1
// Exemplo A
2
for (let i = 5; i >= 1; i--) { // Loop externo, controla o número de linhas, de 1 a 5.
3
  let row = ''; // A cada execução do loop externo, cria uma string vazia `row`, usada para armazenar as estrelas da linha atual.
4
  for (let j = 1; j <= i; j++) { // Loop interno, controla o número de estrelas em cada linha, de 1 ao número da linha atual `i`.
5
    row += '* ';  // Adiciona estrela a `row`, formando a string de estrelas da linha atual.
6
  }
7
  console.log(row);  // Exibe a string de estrelas da linha atual.
8
}

1
// Exemplo B
2
for (let i = 1; i <= 5; i++) { // Loop externo representa o número de linhas
3
    for (let j = 0; j <= 5 - i; j++) { // Loop interno representa as colunas
4
        document.write('⭐'); // Usa estrela como elemento gráfico
5
    }
6
    document.write('</br>'); // Quebra de linha
7
}

`break` para terminar (finalizar, sair) do loop

break é usado para terminar (finalizar, sair) do loop atual ou instrução switch. Se não houver break, os case subsequentes continuarão a ser executados (ou seja, ocorre o fenômeno de “penetração”).

A combinação “loop infinito + break” é adequada para situações onde não é necessário verificar a condição no início/fim do loop, mas é necessário verificar a condição no meio ou mesmo em várias posições do corpo.

Exemplo:

1
let count = 0;
2
while (true) {
3
  console.log("No loop...");
4
  // Simula uma condição, quando satisfeita, sai do loop
5
  if (count === 5) {
6
    console.log("Condição satisfeita, saindo do loop");
7
    break;
8
  }
9
  count++;
10
}

`continue` para continuar a próxima iteração (pular) do loop

continue é usado para terminar prematuramente a iteração atual em um loop e continuar a próxima iteração. continue é a “versão leve” do break. Ele não para o loop inteiro. Em vez disso, para a iteração atual e força o início de uma nova iteração (se a condição permitir).

Exemplo:

1
for (let i = 0; i < 8; i++) {
2
    if (i % 2 === 0) {
3
        continue; // Quando i módulo 2 for 0, pula a iteração atual e continua a próxima iteração
4
    }
5
    console.log(i);
6
}

Loop while

Loop do-while

Loop for

Omitindo segmentos de instrução

Loops aninhados

break para terminar (finalizar, sair) do loop

continue para continuar a próxima iteração (pular) do loop

Comentários

Loop `while`

Loop `do-while`

Loop `for`

`break` para terminar (finalizar, sair) do loop

`continue` para continuar a próxima iteração (pular) do loop