JavaScript Array Iteration

---

Los métodos de iteración de matrices operan en cada elemento de la matriz.

---

JavaScript Array forEach()

El método forEach() llama a una función (una función de devolución de llamada) una vez para cada elemento de la matriz.

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value + "<br>";
}

Ver ejemplo

Tenga en cuenta que la función toma 3 argumentos:

• El valor del ítem

• El índice del ítem

• La matriz en sí

El ejemplo anterior utiliza sólo el parámetro de valor. El ejemplo se puede reescribir como:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

Ver ejemplo

---

JavaScript Array map()

El método map() crea una nueva matriz realizando una función en cada elemento de la matriz.

El método map() no ejecuta la función para elementos de matriz sin valores.

El método map() no cambia la matriz original.

Este ejemplo multiplica cada valor de matriz por 2:

Ejemplo:

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

Ver ejemplo

Tenga en cuenta que la función toma 3 argumentos:

• El valor del ítem

• El índice del ítem

• La matriz en sí

Cuando una función de devolución de llamada usa solo el parámetro de valor, se pueden omitir los parámetros de índice y matriz:

Ejemplo:

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

Ver ejemplo

---

JavaScript Array flatMap()

ES2019 agregó el método Array flatMap() a JavaScript.

El método flatMap() primero asigna todos los elementos de una matriz y luego crea una nueva matriz aplanándola.

Ejemplo:

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

Ver ejemplo

---

Soporte del navegador

JavaScript Array flatMap() es compatible con todos los navegadores modernos desde enero de 2020:

---

JavaScript Array filter()

El método filter() crea una nueva matriz con elementos de la matriz que pasan una prueba.

Este ejemplo crea una nueva matriz a partir de elementos con un valor mayor que 18:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Ver ejemplo

Tenga en cuenta que la función toma 3 argumentos:

• El valor del ítem

• El índice del ítem

• La matriz en sí

En el ejemplo anterior, la función de devolución de llamada no utiliza los parámetros de índice y matriz, por lo que se pueden omitir:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

Ver ejemplo

---

JavaScript Array reduce()

El método reduce() ejecuta una función en cada elemento de la matriz para producir (reducirlo a) un valor único.

El método reduce() funciona de izquierda a derecha en la matriz. Véase también reducirRight().

El método reduce() no reduce la matriz original.

Este ejemplo encuentra la suma de todos los números en una matriz:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

Ver ejemplo

Tenga en cuenta que la función toma 4 argumentos:

• El total (el valor inicial/valor devuelto previamente)

• El valor del ítem

• El índice del ítem

• La matriz en sí

El ejemplo anterior no utiliza los parámetros de índice y matriz. Se puede reescribir como:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

Ver ejemplo

El método reduce() puede aceptar un valor inicial:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

Ver ejemplo

---

JavaScript Array reduceRight()

El método reduceRight() ejecuta una función en cada elemento de la matriz para producir (reducirlo a) un valor único.

reduceRight() funciona de derecha a izquierda en la matriz. Véase también reduce().

El método reduceRight() no reduce la matriz original.

Este ejemplo encuentra la suma de todos los números en una matriz:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

Ver ejemplo

Tenga en cuenta que la función toma 4 argumentos:

• El total (el valor inicial/valor devuelto previamente)

• El valor del ítem

• El índice del ítem

• La matriz en sí

El ejemplo anterior no utiliza los parámetros de índice y matriz. Se puede reescribir como:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

Ver ejemplo

---

JavaScript Array every()

El método every() comprueba si todos los valores de la matriz pasan una prueba.

Este ejemplo comprueba si todos los valores de la matriz son mayores que 18:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Ver ejemplo

Tenga en cuenta que la función toma 3 argumentos:

• El valor del ítem

• El índice del ítem

• La matriz en sí

Cuando una función de devolución de llamada usa solo el primer parámetro (valor), los demás parámetros se pueden omitir:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

Ver ejemplo

---

JavaScript Array some()

El método some() comprueba si algunos valores de la matriz pasan una prueba.

Este ejemplo comprueba si algunos valores de matriz son mayores que 18:

Ejemplo:

const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Ver ejemplo

Tenga en cuenta que la función toma 3 argumentos:

• El valor del ítem

• El índice del ítem

• La matriz en sí

---

JavaScript Array indexOf()

El método indexOf() busca en una matriz el valor de un elemento y devuelve su posición.

Nota: El primer elemento tiene la posición 0, el segundo elemento tiene la posición 1, y así sucesivamente.

Ejemplo:

Busque en una matriz el elemento "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

Ver ejemplo

---

Sintaxis

array.indexOf(item, start)

Array.indexOf() devuelve -1 si no se encuentra el elemento.

Si el elemento está presente más de una vez, devuelve la posición de la primera aparición.

---

JavaScript Array lastIndexOf()

Array.lastIndexOf() es lo mismo que Array.indexOf(), pero devuelve la posición de la última aparición del elemento especificado.

Ejemplo:

Busque en una matriz el elemento "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

Ver ejemplo

---

Sintaxis

array.lastIndexOf(item, start)

---

JavaScript Array find()

El método find() devuelve el valor del primer elemento de la matriz que pasa una función de prueba.

Este ejemplo encuentra (devuelve el valor de) el primer elemento mayor que 18:

Ejemplo:

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Ver ejemplo

Tenga en cuenta que la función toma 3 argumentos:

• El valor del ítem

• El índice del ítem

• La matriz en sí

---

Soporte del navegador

find() es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

find() no es compatible con Internet Explorer.

---

JavaScript Array findIndex()

El método findIndex() devuelve el índice del primer elemento de la matriz que pasa una función de prueba.

Este ejemplo encuentra el índice del primer elemento mayor que 18:

Ejemplo:

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Ver ejemplo

Tenga en cuenta que la función toma 3 argumentos:

• El valor del ítem

• El índice del ítem

• La matriz en sí

---

Soporte del navegador

findIndex() es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

findIndex() no es compatible con Internet Explorer.

---

JavaScript Array.from()

El método Array.from() devuelve un objeto Array de cualquier objeto con una propiedad de longitud o cualquier objeto iterable.

Ejemplo:

Cree una matriz a partir de una cadena:

Array.from("ABCDEFG");

Ver ejemplo

---

Soporte del navegador

from() es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

from() no es compatible con Internet Explorer.

---

JavaScript Array Keys()

El método Array.keys() devuelve un objeto Array Iterator con las claves de una matriz.

Ejemplo:

Cree un objeto Array Iterator, que contenga las claves de la matriz:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

for (let x of keys) {
  text += x + "<br>";
}

Ver ejemplo

---

Soporte del navegador

keys() es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

keys() no es compatible con Internet Explorer.

---

JavaScript Array entries()

Ejemplo:

Cree un iterador de matriz y luego repita los pares clave/valor:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

Ver ejemplo

El método entries() devuelve un objeto Array Iterator con pares clave/valor:

[0, "Banana"]

[1, "Orange"]

[2, "Apple"]

[3, "Mango"]

El método entries() no cambia la matriz original.

---

Soporte del navegador

entries() es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

entries() no es compatible con Internet Explorer.

---

JavaScript Array includes()

ECMAScript 2016 introdujo Array.includes() en las matrices. Esto nos permite verificar si un elemento está presente en una matriz (incluido NaN, a diferencia de indexOf).

Ejemplo:

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // is true

Ver ejemplo

---

Sintaxis

array.includes(search-item)

Array.includes() permite comprobar los valores de NaN. A diferencia de Array.indexOf().

---

Soporte del navegador

includes() es una característica de ECMAScript 2016.

Es compatible con todos los navegadores modernos:

includes() no es compatible con Internet Explorer.

---

JavaScript Array Spread (...)

El operador ... expande un iterable (como una matriz) en más elementos:

Ejemplo:

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];

Ver ejemplo

---

Soporte del navegador

... es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

... no es compatible con Internet Explorer.

---

Referencia completa de matrices JavaScript

Para obtener una referencia completa de Array, vaya a:

Referencia completa de matrices de JavaScript.

La referencia contiene descripciones y ejemplos de todas las propiedades y métodos de Array.

---

Traducido con 💚 desde W3Schools.com