5 formas de iterar arrays no Javascript

5 formas de iterar arrays no Javascript – Introdução

No Javascript há várias formas de iterar e manipular arrays, e muitas pessoas não conhecem todas, então hoje vou mostrar 5 formas de iterar arrays no Javascript.

Forma #1 – Iterando os Índices do Array

A primeira forma e também a mais conhecida é iterar os índices do array.

Iterando os índices do array você vai acessar os objetos pela posição deles dentro do array.

Para isso temos muitas formas, todas elas parecidas, mas cada uma com sua particularidade.

As principais formas de iterar arrays pelos índices são usando laços simples de repetição, os famosos loops.

Mas é possível fazer de outras formas também, como usando recursão por exemplo.

Os principais laços de repetição do JavaScript são o for, while e do-while.

No geral as três funções funcionam de forma bem parecida, e no geral tem o mesmo resultado.

Mas claro, cada uma delas tem sua própria sintaxe.

Essa com certeza é a forma mais usada de iterar arrays.

Mas vale lembrar que iterar os arrays pelos índices exige alguns cuidados especiais.

O principal cuidado é validar se o índice que está sendo iterado é menor que o tamanho do array por exemplo.

Além disso, validar se o objeto não é nulo nunca faz mal.

Forma #2 – Array.forEach()

A segunda forma que também é bem conhecida é usando a função ForEach().

O foreach é uma função até que nova que foi inserida no ECMAScript 5.1.

A função tem como parâmetro uma função de callback, e não tem nenhum dado de retorno.

Dentro da função de callback ficam acessíveis 3 objetos, são eles:

Valor atual – Obrigatório.
Índice atual – Opcional.
O próprio array – Opcional.

Mesmo que a função de callback possa ter 3 parâmetros, o mais comum é só usar o valor atual.

Mas é sempre útil saber que há os outros dois parâmetros, pois eles podem ser úteis em alguma implementação.

Segue um exemplo de uso da função forEach.

Forma #3 – Array.map()

A super poderosa função map().

A função map também tem como parâmetro uma função de callback.

Mas diferente do foreach que não tem retorno o map retorna um novo array.

Para cada valor no array original é aplicada a função passada como parâmetro e o resultado disso é inserido em um novo array que é retornado.

Os mesmos três objetos do foreach ficam acessíveis para a função de callback que deve ser passada como parâmetro para o map.

Por criar um novo array a função map permite uma grande flexibilidade ao aplicar funções em todos os elementos de um array.

Uma vez que não altera o array original, já que a função cria uma cópia em memória do array original e faz as operações a partir dessa cópia.

Confira um exemplo abaixo.

Dado um array de números, fazer a raiz quadrada de todos os números.

Forma #4 – Array.filter()

A quarta forma de iterar um array é usando a função filter().

A função filter retorna um array e espera uma função de callback que retorne um valor booleano para cada elemento do array.

O elemento que está sendo iterado é inserido no array de retorno desde que o retorno da função de callback seja verdadeiro.

Em suma a função filter é ideal para filtrar um array.

Mas vale lembrar que o filter não altera o array original.

Confira um exemplo abaixo.

Dado um array de alunos, buscar todos que tenham nota maior que 60.

Forma #5 – Array.reduce()

A quinta e última forma de iterar um array é usando a função Reduce().

Em suma o reduce condensa todos os elementos de um array em um único objeto de retorno.

Confira um exemplo abaixo.

Dado um array de números, retorne a soma dos números.