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 callback
funçã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 docurrentElement
array.array
: o array que chama oforEach()
método.
Os index
e array
sã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, undefined
portanto, 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 for
loop é 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 callback
funçã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 Counter
a 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
Counter
objeto. - A seguir, defina uma matriz de três números.
- Em seguida, declare uma variável
sum
e atribua a ela o valor zero. - Depois disso, chame o
forEach()
método nonumbers
array. Na função de retorno de chamada, adicione o elemento àsum
variável e chame oincrease()
método docounter
objeto. Observe que ocounter
objeto é referido comothis
dentro da função de retorno de chamada. - Por fim, registre o valor da soma e o valor atual do contador no console web.
Neste tutorial, você aprendeu como usar o forEach()
método JavaScript Array para executar um retorno de chamada em cada elemento de um array.