Como usar loops em JavaScript

O loop permite que você itere por meio de cada item em uma matriz para que você possa personalizar e produzir cada um deles como desejar. Como acontece com toda linguagem de programação, os loops são uma ferramenta crucial para renderizar arrays em JavaScript também.

Com a ajuda de alguns exemplos práticos, vamos nos aprofundar nas várias maneiras de usar loops em JavaScript.

O Incremental e Decremental para Loop em JavaScript

O incremental para loop é a base da iteração em JavaScript.

Ele assume um valor inicial atribuído a uma variável e executa uma verificação de comprimento condicional simples. Em seguida, ele aumenta ou diminui esse valor usando o ++ ou -- operadores.

Esta é a aparência de sua sintaxe geral:

para (var i = valor inicial; i array [i]}

Agora vamos iterar por meio de uma matriz usando a sintaxe de base acima:

umArray = [1, 3, 5, 6];
para (deixe i = 0; i console.log (anArray [i])
}
Saída:
1
3
5
6 

Agora vamos operar em cada item da matriz acima usando o JavaScript para ciclo:

umArray = [1, 3, 5, 6];
para (deixe i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Saída:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

O loop está iterando pela matriz incrementalmente com o ++ operador, produzindo uma saída ordenada.

Mas usando o negativo (--), você pode inverter a saída.

As sintaxes são as mesmas, mas a lógica é um pouco diferente do loop incremental acima.

Veja como funciona o método decremental:

umArray = [1, 3, 5, 6];
para (deixe i = umArray.length-1; i> = 0; eu--) {
console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Saída:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

A lógica por trás do código acima não é rebuscada. A indexação da matriz começa do zero. Então ligando anArray [i] normalmente itera do índice zero a três, pois a matriz acima contém quatro itens.

Portanto, remover um do comprimento do array e definir a condição como maior ou igual a zero, como fizemos, é muito útil - especialmente ao usar o array como base para sua iteração.

Ele mantém o índice da matriz em um a menos do que seu comprimento. A condição i> = 0 em seguida, força a contagem a parar no último item da matriz.

Relacionado: Métodos de array JavaScript que você deve dominar hoje

JavaScript para cada

Embora você não possa decrementar usando JavaScript's para cada, muitas vezes é menos prolixo do que o bruto para ciclo. Funciona escolhendo um item após o outro sem memorizar o anterior.

Aqui está a sintaxe geral do JavaScript para cada:

array.forEach (element => {
açao
})

Dê uma olhada em como funciona na prática:

deixe umArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Saída:
1
3
5
6 

Agora use isso para executar uma operação matemática simples em cada item, como você fez na seção anterior:

deixe umArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Saída:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Como usar o for... no loop de JavaScript

o para... em loop em JavaScript itera por meio de uma matriz e retorna seu índice.

Você achará fácil de usar para... em se você está familiarizado com Python's for loop pois são semelhantes em termos de simplicidade e lógica.

Dê uma olhada em sua sintaxe geral:

para (deixar elemento na matriz) {
açao 
}

Então o para... em loop atribui cada item em uma matriz à variável (elemento) declarada entre parênteses.

Assim, registrar o elemento diretamente no loop retorna um índice de matriz e não os próprios itens:

deixe umArray = [1, 3, 5, 6];
para (deixe i em um array) {
console.log (i)
}
Saída:
0
1
2
3 

Em vez disso, para produzir cada item:

deixe umArray = [1, 3, 5, 6];
para (deixe i em um array) {
console.log (anArray [i])
}
Saída:
1
3
5
6 

Como você fez ao usar o loop decremental, também é fácil reverter a saída usando para... em:

deixe umArray = [1, 3, 5, 6];
// Remova um do comprimento da matriz e atribua-o a uma variável:
deixe v = umArray.length - 1; 
// Use a variável acima como uma base de índice enquanto itera para baixo na matriz:
para (deixe i em um array) {
console.log (anArray [v])
v - = 1;
}
Saída:
6
5
3
1 

O código acima é logicamente semelhante ao que você fez ao usar o loop decremental. É mais legível e explicitamente delineado, no entanto.

JavaScript para... do Loop

o para de loop é semelhante ao para... em ciclo.

No entanto, ao contrário para... em, ele não itera pelo índice do array, mas pelos próprios itens.

Sua sintaxe geral é assim:

para (deixe i da matriz) {
açao 
}

Vamos usar este método de loop para iterar por meio de uma matriz de forma incremental para ver como funciona:

deixe umArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log (i)
}
Saída:
1
3
5
6 

Você também pode usar esse método para percorrer a matriz e reverter a saída. É semelhante a como você faz isso usando para... em:

deixe umArray = [1, 3, 5, 6];
deixe v = umArray.length - 1;
para (seja x de umArray) {
console.log (anArray [v])
v - = 1;
}
Saída:
6
5
3
1

Para operar dentro do loop:

deixe umArray = [1, 3, 5, 6];
deixe v = umArray.length - 1;
para (seja x de umArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v - = 1;
}
Saída:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

The While Loop

o enquanto o loop é executado continuamente enquanto uma condição especificada permanecer verdadeira. Geralmente é usado como um loop infinito.

Por exemplo, como zero é sempre menor que dez, o código abaixo é executado continuamente:

deixe i = 0;
enquanto (i <10) {
console.log (4)
}

O código acima registra "4" infinitamente.

Vamos iterar por meio de uma matriz usando o enquanto ciclo:

deixe i = 0;
while (i console.log (anArray [i])
i + = 1
}
Saída:
1
3
5
6 

JavaScript faz... while Loop

o fazer enquanto loop aceita e executa um conjunto de ações explicitamente dentro de um Faz sintaxe. Em seguida, ele declara a condição para essa ação dentro do enquanto ciclo.

É assim que fica:

Faz{
ações
}
enquanto (
consição
)

Agora vamos iterar por meio de uma matriz usando este método de loop:

Faz{
console.log (anArray [i])
i + = 1
}
enquanto (
i )
Saída:
1
3
5
6 

Familiarize-se com os loops JavaScript

Embora tenhamos destacado os vários métodos de loop de JavaScript aqui, o domínio dos fundamentos da iteração na programação permite que você os use de maneira flexível e segura em seus programas. Dito isso, a maioria desses loops JavaScript funcionam da mesma maneira, com apenas algumas diferenças em seu esboço geral e sintaxes.

Os loops, no entanto, são a base da maioria da renderização de array do lado do cliente. Portanto, sinta-se à vontade para ajustar esses métodos de loop como desejar. Usá-los com arrays mais complexos, por exemplo, oferece uma melhor compreensão dos loops JavaScript.

Como usar a instrução if-else do JavaScript

A instrução if-else é a primeira etapa em direção à lógica de programação em seus aplicativos.

Leia a seguir

Sobre o autor