Iteração de array JavaScript

Métodos de iteração de array operam em cada item do array.

Array.forEach()

forEach() O método chama a função uma vez para cada elemento do array (função de callback).

Exemplo

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

Experimente você mesmo

Comentário:A função aceita 3 parâmetros:

  • Valor do item
  • Índice do item
  • O próprio array

No exemplo acima, foi usado apenas o parâmetro value. Este exemplo pode ser rewritten como:

Exemplo

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Experimente você mesmo

Todos os navegadores suportam Array.forEach()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

Array.map()

map() O método cria um novo array aplicando uma função a cada elemento do array.

map() O método não executa a função em elementos do array sem valor.

map() O método não altera o array original.

Este exemplo multiplica cada valor do array por 2:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

Experimente você mesmo

Por favor, note que a função tem 3 parâmetros:

  • Valor do item
  • Índice do item
  • O próprio array

Quando a função de callback usa apenas o parâmetro value, os parâmetros de índice e array podem ser omitidos:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Experimente você mesmo

Todos os navegadores suportam Array.map()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

Array.filter()

filter() O método cria um novo array contendo os elementos que passaram no teste.

Este exemplo cria um novo array com elementos cujos valores são maiores que 18:

Exemplo

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Experimente você mesmo

Observe que esta função aceita 3 parâmetros:

  • Valor do item
  • Índice do item
  • O próprio array

No exemplo acima, a função de callback não usa os parâmetros index e array, portanto, eles podem ser omitidos:

Exemplo

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Experimente você mesmo

Todos os navegadores suportam Array.filter()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

Array.reduce()

reduce() O método aplica uma função em cada elemento do array, gerando (reduzindo) um único valor.

reduce() O método trabalha no array de esquerda para direita. Veja também reduceRight().

reduce() O método não diminui o array original.

Este exemplo determina a soma de todos os números em um array:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Experimente você mesmo

Por favor, note que esta função aceita 4 parâmetros:

  • Total (valor inicial/prévia valor retornado)
  • Valor do item
  • Índice do item
  • O próprio array

No exemplo anterior, não foram usados os parâmetros index e array. Pode ser reescrito da seguinte forma:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Experimente você mesmo

reduce() O método pode aceitar um valor inicial:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

Experimente você mesmo

Todos os navegadores suportam Array.reduce()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

Array.reduceRight()

reduceRight() O método aplica uma função em cada elemento do array, gerando (reduzindo) um único valor.

reduceRight() O método trabalha no array de direita para esquerda. Veja também reduce().

reduceRight() O método não diminui o array original.

Este exemplo determina a soma de todos os números em um array:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Experimente você mesmo

Por favor, note que esta função aceita 4 parâmetros:

  • Total (valor inicial/prévia valor retornado)
  • Valor do item
  • Índice do item
  • O próprio array

No exemplo anterior, não foram usados os parâmetros index e array. Pode ser reescrito da seguinte forma:

Exemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Experimente você mesmo

Todos os navegadores suportam Array.reduceRight()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

Array.every()

every() O método verifica se todos os valores do array passaram pelo teste.

Este exemplo verifica se todos os valores do array são maiores que 18:

Exemplo

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Experimente você mesmo

Observe que esta função aceita 3 parâmetros:

  • Valor do item
  • Índice do item
  • O próprio array

Se o callback função usar apenas o primeiro parâmetro (valor), outros parâmetros podem ser omitidos:

Exemplo

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Experimente você mesmo

Todos os navegadores suportam Array.every()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

Array.some()

some() O método verifica se alguns valores do array passaram pelo teste.

Este exemplo verifica se alguns valores do array são maiores que 18:

Exemplo

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Experimente você mesmo

Observe que esta função aceita 3 parâmetros:

  • Valor do item
  • Índice do item
  • O próprio array

Todos os navegadores suportam Array.some()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

Array.indexOf()

indexOf() O método busca um elemento no array e retorna sua posição.

Comentário:A posição do primeiro item é 0, a posição do segundo item é 1, e assim por diante.

Exemplo

Pesquisar o item "Apple" no array:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Experimente você mesmo

Todos os navegadores suportam Array.indexOf()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

sintaxe

array.indexOf(item, início)
item obrigatório. O item a ser pesquisado.
início opcional. De onde começar a pesquisa. Valores negativos começarão a partir do final do array até o início.

Se o item não for encontrado:Array.indexOf() Retorna -1.

Se o item aparecer várias vezes, retorna a posição da primeira ocorrência.

Array.lastIndexOf()

Array.lastIndexOf() com Array.indexOf() semelhante, mas começa a procurar a partir do final do array.

Exemplo

Pesquisar o item "Apple" no array:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Experimente você mesmo

Todos os navegadores suportam Array.lastIndexOf()exceto o Internet Explorer 8 ou versões anteriores:

Sim 9.0 Sim Sim Sim

sintaxe

array.lastIndexOf(item, início)
item obrigatório. O item a ser pesquisado.
início Opcional. De onde começar a busca. Valores negativos começarão a partir do final e buscarão até o início.

Array.find()

find() O método retorna o valor do primeiro elemento do array que passa pelo teste da função.

Este exemplo encontra (retorna) o valor do primeiro elemento maior que 18:

Exemplo

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Experimente você mesmo

Observe que esta função aceita 3 parâmetros:

  • Valor do item
  • Índice do item
  • O próprio array

Navegadores antigos não suportam Array.find()A seguir, está listada a primeira versão do navegador que suporta este método:

45 12 25 8 32

Array.findIndex()

findIndex() O método retorna o índice do primeiro elemento do array que passa pelo teste da função.

Este exemplo encontra o índice do primeiro elemento maior que 18:

Exemplo

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Experimente você mesmo

Observe que esta função aceita 3 parâmetros:

  • Valor do item
  • Índice do item
  • O próprio array

Navegadores antigos não suportam Array.findIndex()A seguir, está listada a primeira versão do navegador que suporta este método:

45 12 25 8 32