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 está sendo usado para fazer loop em matrizes, mas usa uma função de maneira diferente do clássico "for loop".

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

  • Valor Atual (obrigatório) - O valor do elemento atual da matriz
  • Índice (opcional) - número do índice do elemento atual
  • Matriz (opcional) - o objeto da 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, é necessária uma função de retorno de chamada (ou função anônima):

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

A função será executada para cada elemento único da matriz. É necessário usar pelo menos um parâmetro que represente os elementos de uma matriz:

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

É tudo o que precisamos fazer para percorrer a matriz:

Ads z 2

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));
Seta Função Representação

Parâmetros opcionais

Índice

Tudo bem, agora vamos continuar com os parâmetros opcionais. O primeiro é o parâmetro "index", 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);});

Ads z 3

Matriz

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

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

Ads z

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

Suporte do navegador

O método Array.forEach é suportado em qualquer navegador, espere o IE versão 8 ou anterior:

Ads z
caniuse.com

Se você quiser saber mais sobre Desenvolvimento Web, sinta-se à vontade para visitar meu Canal do Youtube.

Obrigado pela leitura!