Como percorrer um array em JavaScript: Métodos e Exemplos

Como percorrer um array em JavaScript?

Em JavaScript, existem várias formas de percorrer os elementos de um array. Cada método tem características e usos específicos, e escolher o método certo depende do que você deseja fazer com os elementos durante a iteração. Entre os métodos mais utilizados estão o for tradicional, forEach(), e métodos de array como map(), filter(), e reduce().

Usando o laço `for`

O laço for tradicional é uma das formas mais antigas e flexíveis de percorrer um array. Ele permite controlar o índice manualmente, o que pode ser útil quando você precisa de mais controle sobre a iteração.

Exemplo de código com for:

let numeros = [1, 2, 3, 4, 5];
for (let i = 0; i < numeros.length; i++) {
  console.log(numeros[i]);
}

Neste exemplo, o laço for começa com o índice i igual a 0, e continua até i ser menor que o comprimento do array (numeros.length). Em cada iteração, o valor de numeros[i] é exibido no console.

Usando `forEach()`

O método forEach() é uma forma de percorrer um array que torna o código mais legível e conciso. Ele executa uma função callback para cada elemento do array. O método forEach() não retorna nada, ou seja, ele não cria um novo array.

Exemplo de código com forEach():

let numeros = [1, 2, 3, 4, 5];

numeros.forEach(function(numero) {
  console.log(numero);
});

Neste exemplo, forEach() chama a função anônima para cada elemento de numeros, e exibe cada número no console. Esse método é simples e útil para realizar operações em cada elemento sem precisar manipular o índice diretamente.

Usando `map()`

O método map() é semelhante ao forEach(), mas com uma diferença importante: ele retorna um novo array com os resultados da execução de uma função callback sobre cada elemento do array original. Isso o torna útil quando você precisa transformar os elementos do array.

Exemplo de código com map():

let numeros = [1, 2, 3, 4, 5];
let dobro = numeros.map(function(numero) {
  return numero * 2;
});
console.log(dobro);  // Exibe [2, 4, 6, 8, 10]

Neste exemplo, o método map() cria um novo array com os valores dos elementos originais multiplicados por 2.

Usando `filter()`

O método filter() é usado quando você deseja criar um novo array com os elementos que passam em uma condição específica. Ao contrário do map(), ele não transforma os elementos, mas apenas os seleciona conforme um critério de filtragem.

Exemplo de código com filter():

let numeros = [1, 2, 3, 4, 5];
let pares = numeros.filter(function(numero) {
  return numero % 2 === 0;
});
console.log(pares);  // Exibe [2, 4]

Aqui, filter() cria um novo array contendo apenas os números pares do array original.

Usando `reduce()`

O método reduce() é um pouco diferente dos anteriores. Ele reduz os elementos do array a um único valor, aplicando uma função acumuladora a cada elemento do array. Esse método é útil quando você precisa realizar cálculos ou agregações, como somar os elementos de um array.

Exemplo de código com reduce():

let numeros = [1, 2, 3, 4, 5];
let soma = numeros.reduce(function(acumulador, numero) {
  return acumulador + numero;
}, 0);
console.log(soma);  // Exibe 15

Aqui, reduce() soma todos os elementos do array, começando com o valor inicial de 0. A função acumuladora adiciona cada numero ao acumulador durante as iterações.

Conclusão

Existem várias maneiras de percorrer e manipular elementos em um array em JavaScript. Dependendo do que você deseja fazer, você pode usar o laço for, que oferece flexibilidade e controle, ou os métodos de array como forEach(), map(), filter(), e reduce(), que tornam o código mais conciso e legível. Cada um desses métodos tem seu propósito, e entender como usá-los adequadamente pode melhorar a eficiência do seu código.

Por que usar os métodos de iteração para arrays em JavaScript?

Percorrer arrays é uma das tarefas mais comuns em JavaScript, especialmente quando se trabalha com grandes volumes de dados ou ao realizar transformações e filtros. Usar os métodos certos para a iteração pode tornar seu código mais limpo, eficiente e fácil de entender. Métodos como forEach(), map(), filter(), e reduce() são ferramentas poderosas que simplificam as operações de iteração, ajudando a manipular arrays de maneira funcional e fluida. Com a prática desses métodos, você conseguirá iterar de maneira eficiente, seja para transformar dados, filtrá-los ou até mesmo reduzir um array a um único valor.

Algumas aplicações:

Transformar arrays com map() para gerar novos dados a partir dos valores existentes.
Filtrar valores de um array com filter() para criar subconjuntos de dados que atendem a certos critérios.
Realizar cálculos e agregações com reduce() para reduzir um array a um único valor, como somar ou multiplicar valores.
Iterar sobre arrays para realizar ações em cada elemento, como atualizar valores ou adicionar novos elementos usando forEach().

Dicas para quem está começando

Use map() para transformar os dados de um array e criar um novo array com os resultados.
Experimente forEach() para executar uma função em cada elemento de um array sem precisar retornar um novo array.
Aprenda a usar filter() para extrair elementos específicos de um array com base em condições definidas.
Se precisar realizar operações acumulativas, como somar os valores de um array, use reduce().

Contribuições de Lucas Souza

Percorrendo um array em JavaScript