JavaScript forEach - Como fazer um loop em uma matriz em JS

O método JavaScript forEach é uma das várias maneiras de percorrer matrizes. Cada método possui recursos diferentes, e depende de você, dependendo do que está fazendo, decidir qual usar.

Nesta postagem, vamos dar uma olhada mais de perto no método JavaScript forEach.

Considerando que temos a seguinte matriz abaixo:

const numbers = [1, 2, 3, 4, 5];

Usar o tradicional "for loop" para percorrer a matriz seria assim:

for (i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 

O que torna o método forEach () diferente?

O método forEach também é usado para percorrer arrays, mas usa uma função diferente do clássico "for loop".

O método forEach passa uma função de retorno de chamada para cada elemento de uma matriz junto com os seguintes parâmetros:

• Valor atual (obrigatório) - O valor do elemento da matriz atual
• Índice (opcional) - O número do índice do elemento atual
• Array (opcional) - O objeto de matriz ao qual o elemento atual pertence

Deixe-me explicar esses parâmetros passo a passo.

Em primeiro lugar, para percorrer uma matriz usando o método forEach, você precisa de uma função de retorno de chamada (ou função anônima):

numbers.forEach(function() { // code });

A função será executada para cada elemento da matriz. Deve ter pelo menos um parâmetro que representa os elementos de uma matriz:

numbers.forEach(function(number) { console.log(number); });

Isso é tudo que precisamos fazer para percorrer a matriz:

Como alternativa, você pode usar a representação da função de seta ES6 para simplificar o código:

numbers.forEach(number => console.log(number));

Parâmetros Opcionais

Índice

Tudo bem, agora vamos continuar com os parâmetros opcionais. O primeiro é o parâmetro "índice", que representa o número do índice de cada elemento.

Basicamente, podemos ver o número do índice de um elemento se o incluirmos como um segundo parâmetro:

numbers.forEach((number, index) => { console.log('Index: ' + index + ' Value: ' + number); });

Array

O parâmetro array é o próprio array. Também é opcional e pode ser usado, se necessário, em várias operações. Do contrário, se o chamarmos, ele será impresso tantas vezes quanto o número de elementos da matriz:

numbers.forEach((number, index, array) => { console.log(array); });

Você pode ver o exemplo de uso do método forEach () neste vídeo:

Suporte de navegador

O método Array.forEach é compatível com todos os navegadores com o IE versão 8 ou anterior:

Se você quiser saber mais sobre Desenvolvimento Web, fique à vontade para visitar meu canal no Youtube.

Obrigado por ler!