Os métodos de iteração de array operam em cada item do array.
forEach()O método forEach() chama uma função (uma função de retorno de chamada) uma vez para cada elemento do array.
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";
}
</script>
</body>
</html>
Observe que a função leva 3 argumentos:
O valor do item
O índice do item
A própria matriz
O exemplo acima usa apenas o parâmetro value. O exemplo pode ser reescrito para:
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + "<br>";
}
</script>
</body>
</html>
map()O método map() cria um novo array executando uma função em cada elemento do array.
O método map() não executa a função para array elementos sem valores.
O método map() não altera o array original.
Este exemplo multiplica cada valor da matriz por 2:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
Observe que a função leva 3 argumentos:
O valor do item
O índice do item
A própria matriz
Quando uma função de retorno de chamada usa apenas o parâmetro value, o índice e a matriz parâmetros podem ser omitidos:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>
flatMap()ES2019 adicionou o método Array flatMap() ao JavaScript.
O método flatMap() primeiro mapeia todos os elementos de um array e então cria um novo array achatando o array.
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>
<p id="demo"></p>
<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
JavaScript Array flatMap() é compatível com todos os navegadores modernos desde janeiro de 2020:
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
filtro()O método filter() cria um novo array com elementos de array que passam em um teste.
Este exemplo cria um novo array a partir de elementos com valor maior que 18:
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array from all array elements that passes a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Observe que a função leva 3 argumentos:
O valor do item
O índice do item
A própria matriz
No exemplo acima, a função de retorno de chamada não usa índice e array parâmetros, então eles podem ser omitidos:
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array with all array elements that passes a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
reduce()O método reduce() executa uma função em cada elemento do array para produzir (reduzi-lo a) um único valor.
O método reduce() funciona da esquerda para a direita no array. Veja também reduceRight().
O método reduce() não reduz o array original.
Este exemplo encontra a soma de todos os números em uma matriz:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Observe que a função leva 4 argumentos:
O total (o valor inicial/valor retornado anteriormente)
O valor do item
O índice do item
A própria matriz
O exemplo acima não usa os parâmetros de índice e array. Pode ser reescrito para:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
O método reduce() pode aceitar um valor inicial:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
reduceRight()O método reduceRight() executa uma função em cada elemento do array para produzir (reduzi-lo a) um único valor.
O reduceRight() funciona da direita para a esquerda no array. Veja também reduce().
O método reduceRight() não reduz o array original.
Este exemplo encontra a soma de todos os números em uma matriz:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Observe que a função leva 4 argumentos:
O total (o valor inicial/valor retornado anteriormente)
O valor do item
O índice do item
A própria matriz
O exemplo acima não usa os parâmetros de índice e array. Pode ser reescrito para:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
every()O método every() verifica se todos os valores do array passam no teste.
Este exemplo verifica se todos os valores do array são maiores que 18:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Observe que a função leva 3 argumentos:
O valor do item
O índice do item
A própria matriz
Quando uma função de retorno de chamada usa apenas o primeiro parâmetro (valor), o outro parâmetros podem ser omitidos:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
some()O método some() verifica se alguns valores do array passam no teste.
Este exemplo verifica se alguns valores do array são maiores que 18:
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The some() Method</h2>
<p>The some() method checks if some array values pass a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Observe que a função leva 3 argumentos:
O valor do item
O índice do item
A própria matriz
indexOf()O método indexOf() pesquisa um valor de elemento em um array e retorna sua posição.
Observação: o primeiro item tem a posição 0, o segundo item tem a posição 1 e assim por diante.
Pesquise em um array o item "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.indexOf(item, start)Obrigatório. O item a ser pesquisado.
Opcional. Por onde começar a pesquisa. Os valores negativos começarão na posição determinada contando do final e pesquisando até o final.
Array.indexOf() retorna -1 se o item não for encontrado.
Se o item estiver presente mais de uma vez, ele retorna a posição do primeiro ocorrência.
lastIndexOf()Array.lastIndexOf() é o mesmo que Array.indexOf(), mas retorna a posição da última ocorrência do elemento especificado.
Pesquise em um array o item "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.lastIndexOf(item, start)Obrigatório. O item a ser pesquisado
Opcional. Por onde começar a pesquisa. Os valores negativos começarão na posição determinada contando do final e pesquisando até o início
find()O método find() retorna o valor do primeiro elemento do array que passa um função de teste.
Este exemplo encontra (retorna o valor) do primeiro elemento que é maior mais de 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "First number over 18 is " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Observe que a função leva 3 argumentos:
O valor do item
O índice do item
A própria matriz
find() é um recurso ES6 (JavaScript 2015).
É compatível com todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() não é compatível com o Internet Explorer.
findIndex()O método findIndex() retorna o índice do primeiro elemento do array que passa em uma função de teste.
Este exemplo encontra o índice do primeiro elemento maior que 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Observe que a função leva 3 argumentos:
O valor do item
O índice do item
A própria matriz
findIndex() é um recurso ES6 (JavaScript 2015).
É compatível com todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() não é compatível com o Internet Explorer.
Array.from()O método Array.from() retorna um objeto Array de qualquer objeto com comprimento propriedade ou qualquer objeto iterável.
Crie um array a partir de uma string:
Array.from("ABCDEFG");Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>
<p>Return an array object from any object with a length property or any iterable object.</p>
<p id="demo"></p>
<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>
<p>The Array.from() method is not supported in Internet Explorer.</p>
</body>
</html>
from() é um recurso ES6 (JavaScript 2015).
É compatível com todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() não é compatível com o Internet Explorer.
Chaves()O método Array.keys() retorna um objeto Array Iterator com as chaves de um array.
Crie um objeto Array Iterator, contendo as chaves do array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>
<p>Return an Array Iterator object with the keys of the array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
<p>Array.keys() is not supported in Internet Explorer.</p>
</body>
</html>
keys() é um recurso ES6 (JavaScript 2015).
É compatível com todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() não é compatível com o Internet Explorer.
entradas()Crie um Array Iterator e, em seguida, itere sobre os pares chave/valor:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>
<p>entries() returns an Array Iterator object with key/value pairs:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>
</body>
</html>
O método entries() retorna um objeto Array Iterator com pares chave/valor:
[0, "Banana"]
[1, "Laranja"]
[2, "Maçã"]
[3, "Manga"]
O método entries() não altera o array original.
entries() é um recurso ES6 (JavaScript 2015).
É compatível com todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
entries() não é compatível com o Internet Explorer.
inclui()ECMAScript 2016 introduziu Array.includes() em arrays. Isso nos permite verificar se um elemento está presente em um array (incluindo NaN, ao contrário de indexOf).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is trueExperimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The includes() Method</h2>
<p>Check if the fruit array contains "Mango":</p>
<p id="demo"></p>
<p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Mango");
</script>
</body>
</html>
array.includes(search-item)Array.includes() permite verificar valores NaN. Ao contrário de Array.indexOf().
includes() é um recurso do ECMAScript 2016.
É compatível com todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() não é compatível com o Internet Explorer.
O operador ... expande um iterável (como um array) em mais elementos:
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "spread" operator spreads elements of iterable objects:</p>
<p id="demo"></p>
<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year;
</script>
</body>
</html>
... é um recurso ES6 (JavaScript 2015).
É compatível com todos os navegadores modernos:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
... não é compatível com o Internet Explorer.
Para uma referência completa do Array, acesse:
Referência completa de array JavaScript.
A referência contém descrições e exemplos de todos os Array propriedades e métodos.