JavaScript forEach()
Nesta documentação de JavaScript veremos como o método forEach() permite executar uma função para cada item de um array.
Apresentaremos aqui como utilizar o método forEach().
JavaScript forEach(): Na prática
//Valor retornado: Verde Amarelo Azul Branco
cores = ["Verde", "Amarelo", "Azul", "Branco"];
function imprimir(item) {
console.log(item);
}
cores.forEach(imprimir);
//Valor retornado: 0 2 4 6 8 10 12 14 16 18 20
numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function tabuadaDe2(item) {
console.log(item*2);
}
numeros.forEach(tabuadaDe2);
//Valor retornado: 55
numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
total = 0;
function somar(item) {
total += item;
}
numeros.forEach(somar);
console.log(total);
//Array retornado: ["Fiat", "Ford"]
marcas = ["Fiat", "Chevrolet", "Ford", "Volkswagen"]
marcasIniciadasComF = [];
novoIndice = 0;
function selecionarMarcas(item, indice) {
if (marcas[indice].indexOf("F") == 0) {
marcasIniciadasComF[novoIndice] = marcas[indice];
novoIndice++;
}
}
marcas.forEach(selecionarMarcas);
console.log(marcasIniciadasComF);
//Array retornado: ["ALBERTO", "ALEX", "SANDRO", "ROBERTA"]
nomes = ["Alberto", "Alex", "Sandro", "Roberta"];
function converterParaMaisculo(item, indice) {
nomes[indice] = nomes[indice].toUpperCase();
}
nomes.forEach(converterParaMaisculo);
console.log(nomes);
//Valor retornado: Ana Roberta
nomes = ["Alberto", "Alex", "Sandro", "Ana Roberta"];
tamanhoNome = 0;
nome = "";
function maiorNome(item, indice) {
if (nomes[indice].length > tamanhoNome) {
nome = nomes[indice];
tamanhoNome = nomes[indice].length;
}
}
nomes.forEach(maiorNome);
console.log(nome); Como funciona o forEach()?
O método forEach() executará uma função para cada elemento presente em um array.
Considerando o seguinte código:
var numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function tabuadaDe2(item) {
console.log(item*2);
}
numeros.forEach(tabuadaDe2)
O resultado impresso no console será o resultado da tabuada de 2: 0 2 4 6 8 10 12 14 16 18 20, conforme a Figura 1.
Sintaxe
array.forEach(funcao([valorAtual, índice, array]), argumentoThis)
Parâmetros
funcao() é a função a ser executada para cada elemento do array. Pode receber três parâmetros:
- valorAtual é o valor da posição atual sendo percorrida no array. Parâmetro obrigatório na declaração a função.
- índice é a posição do array que está sendo lida. Parâmetro opcional da função.
- array é o array a ser percorrido no forEach().Parâmetro opcional da função.
argumentoThis valor opcional a ser usado como this no momento que executar a função de callback. Parâmetro opcional do forEach().
Valor de retorno
É retornado um valor para cada posição do array conforme a lógica implementada na função.
Exemplos de forEach()
Exemplo 1
No exemplo a seguir demonstramos como somar todos os valores de um array:
var numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var total = 0;
function somar(item) {
total += item;
}
numeros.forEach(somar);
console.log(total);
O valor retornado é 55.
Run!Exemplo 2
No exemplo a seguir demonstramos a mesma soma, mas exibindo o valor da somatória a cada posição do array e também o índice sendo percorrido:
var numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var total = 0;
function somar(item, indice) {
total += item;
console.log("[índice " + indice + "]= " + total + " -> ");
}
numeros.forEach(somar);O valor retornado é o seguinte:
[índice 0]= 0 -> [índice 1]= 1 -> [índice 2]= 3 ->
[índice 3]= 6 -> [índice 4]= 10 -> [índice 5]= 15 ->
[índice 6]= 21 -> [índice 7]= 28 -> [índice 8]= 36 ->
[índice 9]= 45 -> [índice 10]= 55 ->Note que além do parâmetro que representa o item no array, neste exemplo também declaramos o indice. Dessa forma pode-se utilizar esse valor no corpo da função.
Run!Exemplo 3
No exemplo a seguir demonstramos como executar uma função para atualizar os valores declarados no array com os valores obtidos com a somatória de cada posição e em seguida imprimimos os itens desse array:
var numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var total = 0;
function somar(item, indice) {
total += item;
numeros[indice] = total;
}
numeros.forEach(somar);
console.log(numeros); O valor retornado é: [ 0, 1, 3, 6, 10, 15, 21, 28, 36, 45, 55 ]. Exatamente a soma dos elementos de cada posição com todas as posições anteriores.
Run!Exemplo 4
No exemplo a seguir demonstramos como obter um novo array contendo apenas as marcas iniciadas com a letra “F”:
var marcas = ["Fiat", "Chevrolet", "Ford", "Volkswagen"]
var marcasIniciadasComF = [];
var novoIndice = 0;
function selecionarMarcas(item, indice) {
if (marcas[indice].indexOf("F") == 0) {
marcasIniciadasComF[novoIndice] = marcas[indice];
novoIndice++;
}
}
marcas.forEach(selecionarMarcas);
console.log(marcasIniciadasComF);O array retornado é: ["Fiat", "Ford"].
Run!Exemplo 5
No exemplo a seguir demonstramos como atualizar todas as strings de um array para que fiquem escritas em maiúsculo:
var nomes = ["Alberto", "Alex", "Sandro", "Roberta"];
function converterParaMaisculo(item, indice) {
nomes[indice] = nomes[indice].toUpperCase();
}
nomes.forEach(converterParaMaisculo);
console.log(nomes); O array retornado é: ["ALBERTO", "ALEX", "SANDRO", "ROBERTA"].
Run!Exemplo 6
No exemplo a seguir demonstramos como obter o maior nome a partir de array de nomes:
var nomes = ["Alberto", "Alex", "Sandro", "Ana Roberta"];
var tamanhoNome = 0;
var nome = "";
function maiorNome(item, indice) {
if (nomes[indice].length > tamanhoNome) {
nome = nomes[indice];
tamanhoNome = nomes[indice].length;
}
}
nomes.forEach(maiorNome);
console.log(nome);
O valor retornado é: "Ana Roberta".
Run!Compatibilidade entre navegadores
forEach() é suportado por todos os browsers apresentados na Tabela 1.
| forEach() | Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|---|
| Sim | Sim | Sim | Sim | Sim | Sim |
Tabela 1. Compatibilidade do método x browsers.
