JavaScript Array forEach: executando uma função em cada elemento

Resumo : neste tutorial, você aprenderá como usar o forEach()método JavaScript Array para executar uma função em cada elemento de um array.

Introdução ao `forEach()`método JavaScript Array

Normalmente, quando você deseja executar uma função em cada elemento de um array , você usa uma instrução de loop for .

Por exemplo, o código a seguir mostra cada elemento de um array para console:

let ranks = ['A', 'B', 'C'];
for (let i = 0; i < ranks.length; i++) {
    console.log(ranks[i]);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

A
B
C

JavaScript Array fornece o forEach()método que permite executar uma função em cada elemento.

O código a seguir usa o forEach()método equivalente ao código acima:

let ranks = ['A', 'B', 'C'];

ranks.forEach(function (e) {
    console.log(e);
});Linguagem de código:  JavaScript  ( javascript )

Saída:

A
B
C

O forEach()método itera sobre os elementos de uma matriz e executa uma função predefinida uma vez por elemento.

O seguinte ilustra a sintaxe do forEach()método.

Array.forEach(callback [, thisArg]);Linguagem de código:  CSS  ( css )

O forEach()método leva dois argumentos:

1) retorno de chamada

A callbackfunção que o forEach()método usa para executar em cada elemento.

O retorno de chamada aceita os seguintes argumentos:

currentElement: é o elemento atual da matriz que está sendo processado.
index: o índice do currentElementarray.
array: o array que chama o forEach()método.

Os indexe arraysão opcionais.

2) este Arg

The thisArgé um valor a ser usado ao executar o retorno de chamada.

Observe que a forEach()função retorna, undefinedportanto, não pode ser encadeada como outros métodos iterativos: filter(), map(), some(), every(),esort().

Uma limitação do forEach()método em comparação com o forloop é que você não pode usar a instrução break ou continue para controlar o loop.

Para encerrar o loop no forEach()método, você deve lançar uma exceção dentro da callbackfunção.

Mais `forEach()`exemplos de método JavaScript Array

Vamos dar uma olhada em um exemplo do forEach()método que usa um arquivo contextObject.

O seguinte ilustra Countera função construtora:

function Counter() {
    this.count = 0;
    let self = this;
    return {
        increase: function () {
            self.count++;
        },
        current: function () {
            return self.count;
        },
        reset: function () {
            self.count = 0;
        }
    }
}Linguagem de código:  PHP  ( php )

Este exemplo mostra como passar o objeto contador para o forEach()método.

var counter = new Counter();
var numbers = [1, 2, 3];
var sum = 0;
numbers.forEach(function (e) {
    sum += e;
    this.increase();
}, counter);

console.log(sum); // 6
console.log(counter.current()); // 3
Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, crie um novo Counterobjeto.
A seguir, defina uma matriz de três números.
Em seguida, declare uma variável sume atribua a ela o valor zero.
Depois disso, chame o forEach()método no numbersarray. Na função de retorno de chamada, adicione o elemento à sumvariável e chame o increase()método do counterobjeto. Observe que o counterobjeto é referido como thisdentro da função de retorno de chamada.
Por fim, registre o valor da soma e o valor atual do contador no console web.