Iterar ou repetir arrays é algo que temos que fazer em quase todos os projetos que envolvem trabalhar com arrays. Existem muitos motivos pelos quais você pode precisar fazer um loop em uma matriz, como mostrar os dados da matriz como saída ou transformá-los.
Existem muitos métodos que você pode usar para iterar sobre arrays em JavaScript. Neste tutorial, aprenderemos sobre todos eles enquanto discutimos as vantagens ou desvantagens de cada um em detalhes.
| método | controle de fluxo com break e continue | vantagem | desvantagem | ||
|---|---|---|---|---|---|
| para loop | pode sair mais cedo com breakfunciona com código assíncrono, suporte a navegador universal |
prolixo e um tanto propenso a erros | |||
forEach() método |
conciso e fácil de ler | sem suporte assíncrono, sem saída antecipada com break
|
|||
for...of laço |
funciona com outros tipos iteráveis, permite saída antecipada, sintaxe reduz erros | menos suporte em navegadores mais antigos | |||
for...in laço |
eficiente em arrays esparsos, permite saída antecipada | pode retornar elementos herdados inesperados |
| método | controle de fluxo com break e continue? | funciona com código assíncrono? | suporte do navegador | notas |
|---|---|---|---|---|
| para loop | sim | sim | todos os navegadores | sintaxe mais detalhada, erros off-by-one |
forEach() método |
não | não | navegadores modernos | conciso e encadeado após outras funções (ou seja, map) |
for...of laço |
sim | sim | navegadores modernos | sintaxe simples reduz erros |
for...in laço |
sim | sim | todos os navegadores | eficiente para arrays esparsos, pode retornar elementos inesperados (herdados) |
Noções básicas de acesso a elementos de matriz
Vamos começar com o básico sobre como acessar elementos de array usando seu índice. A indexação de matriz em JavaScript começa em 0. Isso significa que o primeiro elemento pode ser acessado usando array_name[0] em seu código. Da mesma forma, para uma matriz com n elementos, o último elemento será acessível usando array_name[n - 1].
1 |
let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; |
2 |
|
3 |
let first = animals[0]; |
4 |
|
5 |
let last = animals[4]; |
6 |
|
7 |
console.log(first); |
8 |
// Outputs: Fox
|
9 |
|
10 |
console.log(last); |
11 |
// Outputs: Zebra
|
Iterando usando um for Laço
Uma das maneiras mais comuns e conhecidas de percorrer arrays é a for laço. O for loop inicializa nossa variável de iteração com um valor de 0 para iniciar o loop a partir do primeiro elemento. Como queremos iterar em todo o array, precisamos calcular o comprimento do array, o que é fácil de fazer com o length propriedade. O último elemento em nossa matriz estará acessível usando array_name[length - 1].
O trecho de código a seguir nos mostra como percorrer um array sequencialmente usando um for laço:
1 |
let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; |
2 |
|
3 |
let animal_count = animals.length; |
4 |
|
5 |
for(let i = 0; i < animal_count; i++) { |
6 |
console.log(animals[i]); |
7 |
}
|
8 |
/* Outputs:
|
9 |
Fox
|
10 |
Dog
|
11 |
Lion
|
12 |
Cat
|
13 |
Zebra
|
14 |
*/
|
Você deve observar como estamos usando o operador menor que (<) em vez do operador menor ou igual a (<=) como nossa condição de finalização do loop.
Duas vantagens de usar um for loop ao percorrer arrays é que ele é amplamente suportado e permite que você controle o fluxo do loop through break e continue declarações. Você pode sair do loop assim que encontrar o que está procurando. A for loop também funciona bem quando você está lidando com código assíncrono.
A desvantagem é que é um pouco prolixo e é provável que você cometa erros de vez em quando.
Iterando usando o forEach() Método
Você também pode usar o integrado forEach() para iterar sobre arrays em JavaScript. Este método aceita uma função callback como seu parâmetro que é executado uma vez para cada elemento do array. A função callback pode ser definida em outro lugar, seja uma função inline ou uma função de seta.
A função callback pode aceitar três argumentos diferentes. O primeiro é o próprio elemento atual. O segundo é o índice do elemento atual, enquanto o último argumento é o array no qual chamamos o forEach() método.
1 |
let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; |
2 |
|
3 |
animals.forEach(animal => console.log(animal)); |
4 |
/* Outputs:
|
5 |
Fox
|
6 |
Dog
|
7 |
Lion
|
8 |
Cat
|
9 |
Zebra
|
10 |
*/
|
Como você pode ver, usando o forEach() O método torna nosso código muito mais conciso. Aqui está outro exemplo que usa o segundo argumento da função callback.
1 |
let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; |
2 |
|
3 |
animals.forEach((animal, idx) => { |
4 |
console.log(`Animal ${idx + 1}: ${animal}`); |
5 |
});
|
6 |
/* Outputs:
|
7 |
Animal 1: Fox
|
8 |
Animal 2: Dog
|
9 |
Animal 3: Lion
|
10 |
Animal 4: Cat
|
11 |
Animal 5: Zebra
|
12 |
*/
|
Usando forEach() funciona muito bem para iteração simples sobre arrays. No entanto, você não pode usar break e continue para sair do loop no meio da mudança do fluxo do programa. Outra desvantagem de usar forEach() é que você não poderá usar código assíncrono com este método.
Iterando usando o for...of Laço
O padrão ES6 adicionou muitos novos recursos ao JavaScript. Um deles foi o conceito de iteradores e iteráveis. Você pode usar o for...of loop para iterar sobre valores em qualquer objeto que implemente o @@iterator método. Tipos integrados como Array, String, Set ou Map podem usar um for...of loop para iterar sobre seus valores.
1 |
let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; |
2 |
|
3 |
for(let animal of animals) { |
4 |
console.log(animal); |
5 |
}
|
6 |
/* Outputs:
|
7 |
Fox
|
8 |
Dog
|
9 |
Lion
|
10 |
Cat
|
11 |
Zebra
|
12 |
*/
|
Usando o for...of construção para iteração tem muitas vantagens. Por exemplo, você também pode usá-lo para iterar sobre outros tipos iteráveis integrados. Fora isso, ele permite que você saia do loop e controle o fluxo do programa usando o break ou continue declarações.
A única desvantagem potencial é um pouco menos de suporte ao navegador, mas tudo depende do seu público-alvo.
Iterando usando o for...in Laço
Você também pode percorrer um array usando um for...in declaração. Isso fará um loop em todas as propriedades de string enumeráveis de um objeto. Isso também inclui propriedades enumeráveis herdadas.
Gostaria de mencionar aqui que iterar em um loop usando um for...in declaração não é recomendada. Isso ocorre porque, como mencionei anteriormente, essa instrução irá iterar sobre todas as propriedades inteiras e não inteiras, mesmo que sejam herdadas. Quando estamos iterando sobre arrays, geralmente estamos interessados apenas em chaves inteiras.
A ordem de passagem para o for...in loop é bem definido e começa com a travessia de chaves inteiras não negativas primeiro. As chaves inteiras não negativas são percorridas em ordem crescente por valor. Outras chaves de string são então percorridas na ordem de sua criação.
Um tipo de arrays que você pode percorrer com um for...in loop melhor do que outros métodos são matrizes esparsas. Por exemplo, um for...of loop irá iterar sobre todos os slots vazios na matriz esparsa enquanto um for...in loop não vai.
Aqui está um exemplo de iteração em uma matriz esparsa com um for...in laço:
1 |
let words = new Array(10000); |
2 |
|
3 |
words[0] = "pie"; |
4 |
words[548] = "language"; |
5 |
words[3497] = "hungry"; |
6 |
|
7 |
for(let idx in words) { |
8 |
if(Object.hasOwn(words, idx)) { |
9 |
console.log(`Position ${idx}: ${words[idx]}`); |
10 |
}
|
11 |
}
|
12 |
/* Outputs:
|
13 |
Position 0: pie
|
14 |
Position 548: language
|
15 |
Position 3497: hungry
|
16 |
*/
|
Você deve ter notado que usamos um método estático chamado Object.hasOwn() para verificar se a propriedade especificada para nosso objeto consultado é de fato sua própria propriedade.
Pensamentos finais
Você sempre pode usar um regular for loop para iterar sobre arrays. Ele permite que você controle o fluxo do programa com a ajuda de break e continue palavras-chave, além de ser compatível com código assíncrono. Por outro lado, exige que você tenha cuidado com os erros de um por um.
O forEach() O método fornece uma maneira mais curta de percorrer uma matriz, mas não funciona bem com código assíncrono. Você também não pode interromper loops ou controlar o fluxo do programa usando break e continue.
O for...of loop nos fornece o melhor dos dois mundos. Temos total controle sobre o fluxo do programa e também funciona com código assíncrono. Também não há necessidade de se preocupar com erros off-by-one.
finalmente, o for...in loop não é uma maneira recomendada para loop através de arrays. No entanto, pode ser útil se os arrays que você está percorrendo forem muito esparsos.
A miniatura desta postagem foi gerada com o DALL-E 2 da OpenAI.
