Iteração de matriz JavaScript
Os métodos de iteração do array operam em cada item do array.
Matriz JavaScript para Cada()
O forEach()método chama uma função (uma função de retorno de chamada) uma vez para cada elemento da matriz.
Exemplo
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Observe que a função recebe 3 argumentos:
- O valor do item
- O índice de itens
- A matriz em si
O exemplo acima usa apenas o parâmetro value. O exemplo pode ser reescrito para:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
Mapa de matriz JavaScript()
O map()método cria um novo array executando uma função em cada elemento do array.
O map()método não executa a função para elementos do array sem valores.
O map()método não altera a matriz original.
Este exemplo multiplica cada valor de matriz por 2:
Exemplo
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Observe que a função recebe 3 argumentos:
- O valor do item
- O índice de itens
- A matriz em si
Quando uma função de retorno de chamada usa apenas o parâmetro value, os parâmetros index e array podem ser omitidos:
Exemplo
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Filtro de matriz JavaScript()
O filter()método cria uma nova matriz com elementos de matriz que passam em um teste.
Este exemplo cria uma nova matriz de elementos com um valor maior que 18:
Exemplo
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Observe que a função recebe 3 argumentos:
- O valor do item
- O índice de itens
- A matriz em si
No exemplo acima, a função callback não usa os parâmetros index e array, então eles podem ser omitidos:
Exemplo
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Redução de matriz JavaScript()
O reduce()método executa uma função em cada elemento da matriz para produzir (reduzi-lo a) um único valor.
O reduce()método funciona da esquerda para a direita na matriz. Veja também reduceRight().
O reduce()método não reduz a matriz original.
Este exemplo encontra a soma de todos os números em uma matriz:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Observe que a função recebe 4 argumentos:
- O total (o valor inicial / valor retornado anteriormente)
- O valor do item
- O índice de itens
- A matriz em si
O exemplo acima não usa os parâmetros index e array. Pode ser reescrito para:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
O reduce()método pode aceitar um valor inicial:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
Matriz JavaScript reduceRight()
O reduceRight()método executa uma função em cada elemento da matriz para produzir (reduzi-lo a) um único valor.
O reduceRight()trabalho da direita para a esquerda na matriz. Veja também reduce().
O reduceRight()método não reduz a matriz original.
Este exemplo encontra a soma de todos os números em uma matriz:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Observe que a função recebe 4 argumentos:
- O total (o valor inicial / valor retornado anteriormente)
- O valor do item
- O índice de itens
- A matriz em si
O exemplo acima não usa os parâmetros index e array. Pode ser reescrito para:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Matriz JavaScript a cada()
O every()método verifica se todos os valores do array passam em um teste.
Este exemplo verifica se todos os valores da matriz são maiores que 18:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Observe que a função recebe 3 argumentos:
- O valor do item
- O índice de itens
- A matriz em si
Quando uma função de retorno de chamada usa apenas o primeiro parâmetro (valor), os outros parâmetros podem ser omitidos:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Matriz JavaScript alguns()
O some()método verifica se alguns valores de array passam em um teste.
Este exemplo verifica se alguns valores de array são maiores que 18:
Exemplo
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Observe que a função recebe 3 argumentos:
- O valor do item
- O índice de itens
- A matriz em si
Matriz JavaScript indexOf()
O indexOf()método procura um valor de elemento em uma matriz e retorna sua posição.
Nota: O primeiro item tem a posição 0, o segundo item tem a posição 1 e assim por diante.
Exemplo
Pesquise uma matriz pelo item "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Sintaxe
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf() retorna -1 se o item não for encontrado.
Se o item estiver presente mais de uma vez, ele retornará a posição da primeira ocorrência.
Matriz JavaScript lastIndexOf()
Array.lastIndexOf()é igual a Array.indexOf(), mas retorna a posição da última ocorrência do elemento especificado.
Exemplo
Pesquise uma matriz pelo item "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Sintaxe
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
JavaScript Array find()
O find()método retorna o valor do primeiro elemento da matriz que passa em uma função de teste.
Este exemplo encontra (retorna o valor de) o primeiro elemento maior que 18:
Exemplo
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Observe que a função recebe 3 argumentos:
- O valor do item
- O índice de itens
- A matriz em si
Suporte ao navegador
find()é um recurso ES6 (JavaScript 2015).
É suportado em todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find()não é compatível com o Internet Explorer.
Matriz JavaScript findIndex()
O findIndex()método retorna o índice do primeiro elemento da matriz que passa em uma função de teste.
Este exemplo encontra o índice do primeiro elemento que é maior que 18:
Exemplo
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Observe que a função recebe 3 argumentos:
- O valor do item
- O índice de itens
- A matriz em si
Suporte ao navegador
findIndex()é um recurso ES6 (JavaScript 2015).
É suportado em todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex()não é compatível com o Internet Explorer.
Matriz JavaScript.from()
O Array.from()método retorna um objeto Array de qualquer objeto com uma propriedade length ou qualquer objeto iterável.
Exemplo
Crie um Array a partir de uma String:
Array.from("ABCDEFG");
Suporte ao navegador
from()é um recurso ES6 (JavaScript 2015).
É suportado em todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from()não é compatível com o Internet Explorer.
Chaves de matriz JavaScript()
O Array.keys()método retorna um objeto Array Iterator com as chaves de um array.
Exemplo
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.