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 circuito é 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 os operadores ++ ou – .
Esta é a aparência de sua sintaxe geral:
for(var i = initial value; i < array.length; i++) {
array[i]}
Agora vamos iterar por meio de uma matriz usando a sintaxe de base acima:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log(anArray[i])
}
Output:
1
3
5
6Agora vamos operar em cada item da matriz acima usando o loop for JavaScript:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Output:
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 operador 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:
anArray = [1, 3, 5, 6];
for(let i = anArray.length-1; i > = 0; i--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5A lógica por trás do código acima não é rebuscada. A indexação da matriz começa do zero. Portanto, chamar 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 de sua iteração.
Ele mantém o índice da matriz em um a menos do que seu comprimento. A condição i> = 0 então força a contagem a parar no último item da matriz.
JavaScript para cada
Embora você não possa decrementar usando forEach do JavaScript, geralmente é menos prolixo do que o loop for bruto. Funciona escolhendo um item após o outro sem memorizar o anterior.
Esta é a sintaxe geral do JavaScript forEach :
array.forEach(element => {
action
})Dê uma olhada em como funciona na prática:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log(x)
});
Output:
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:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log("5", "x", x, "=", x * 5)
});
Output:
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 loop for … in em JavaScript itera por meio de uma matriz e retorna seu índice.
Você descobrirá que é fácil de usar para … se estiver familiarizado com o loop for do Python, pois eles são semelhantes em termos de simplicidade e lógica.
Dê uma olhada em sua sintaxe geral:
for (let element in array){
action
}Portanto, o loop for … in 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:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(i)
}
Output:
0
1
2
3
Em vez disso, para produzir cada item:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(anArray[i])
}
Output:
1
3
5
6
Como você fez ao usar o loop decremental, também é fácil reverter a saída usando for … in :
let anArray = [1, 3, 5, 6];
// Remove one from the length of the array and assign this to a variable:
let v = anArray.length - 1;
// Use the above variable as an index basis while iterating down the array:
for (let i in anArray){
console.log(anArray[v])
v -=1;
}
Output:
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 loop for … of é semelhante ao loop for … in .
No entanto, ao contrário de … in , ele não itera pelo índice da matriz, mas pelos próprios itens.
Sua sintaxe geral é semelhante a esta:
for (let i of array) {
action
}
Vamos usar este método de loop para iterar por meio de uma matriz incrementalmente para ver como funciona:
let anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log(i)
}
Output:
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 usando para … em :
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
Para operar dentro do loop:
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5
The While Loop
O enquanto circuito funciona continuamente enquanto uma condição especificada permanece verdadeiro. Geralmente é usado como um loop infinito.
Por exemplo, como zero é sempre menor que dez, o código abaixo é executado continuamente:
let i = 0;
while (i < 10) {
console.log(4)
}O código acima registra "4" infinitamente.
Vamos iteração através de uma matriz usando o while:
let i = 0;
while (i < anArray.length) {
console.log(anArray[i])
i +=1
}
Output:
1
3
5
6
JavaScript faz … while Loop
A fazer … loop while aceita e executa um conjunto de ações explicitamente dentro de uma sintaxe afazeres. Em seguida, ele afirma a condição para essa ação dentro do loop while.
É assim que parece:
do{
actions
}
while (
consition
)Agora vamos iterar por meio de uma matriz usando este método de loop:
do{
console.log(anArray[i])
i +=1
}
while (
i < anArray.length
)
Output:
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.
