Iteración de matriz de JavaScript
Los métodos de iteración de matrices operan en cada elemento de la matriz.
Matriz de JavaScript para cada uno ()
El forEach()
método 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>";
}
Tenga en cuenta que la función toma 3 argumentos:
- El valor del artículo
- El índice de artículos
- La matriz en sí
El ejemplo anterior usa solo 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>";
}
Mapa de matriz de JavaScript ()
El map()
método crea una nueva matriz realizando una función en cada elemento de la matriz.
El map()
método no ejecuta la función para elementos de matriz sin valores.
El map()
método 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;
}
Tenga en cuenta que la función toma 3 argumentos:
- El valor del artículo
- El índice de artículos
- La matriz en sí
Cuando una función de devolución de llamada usa solo el parámetro de valor, los parámetros de índice y matriz se pueden omitir:
Ejemplo
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Filtro de matriz de JavaScript ()
El filter()
método crea una nueva matriz con elementos de matriz que pasa una prueba.
Este ejemplo crea una nueva matriz a partir de elementos con un valor superior a 18:
Ejemplo
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Tenga en cuenta que la función toma 3 argumentos:
- El valor del artículo
- El índice de artículos
- 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;
}
Matriz de JavaScript reducir ()
El reduce()
método ejecuta una función en cada elemento de la matriz para producir (reducirlo a) un solo valor.
El reduce()
método funciona de izquierda a derecha en la matriz. Ver reduceRight()
también
El reduce()
método 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;
}
Tenga en cuenta que la función toma 4 argumentos:
- El total (el valor inicial / valor previamente devuelto)
- El valor del artículo
- El índice de artículos
- La matriz en sí
El ejemplo anterior no utiliza los parámetros de índice y matriz. Se puede reescribir a:
Ejemplo
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
El reduce()
método 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;
}
Matriz JavaScript reduceRight()
El reduceRight()
método ejecuta una función en cada elemento de la matriz para producir (reducirlo a) un solo valor.
Las reduceRight()
obras de derecha a izquierda en la matriz. Ver reduce()
también
El reduceRight()
método 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 = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Tenga en cuenta que la función toma 4 argumentos:
- El total (el valor inicial / valor previamente devuelto)
- El valor del artículo
- El índice de artículos
- La matriz en sí
El ejemplo anterior no utiliza los parámetros de índice y matriz. Se puede reescribir a:
Ejemplo
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Matriz de JavaScript cada ()
El every()
método verifica si todos los valores de la matriz pasan una prueba.
Este ejemplo verifica 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;
}
Tenga en cuenta que la función toma 3 argumentos:
- El valor del artículo
- El índice de artículos
- La matriz en sí
Cuando una función de devolución de llamada usa solo el primer parámetro (valor), los otros parámetros se pueden omitir:
Ejemplo
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Matriz de JavaScript algunos ()
El some()
método verifica si algunos valores de matriz pasan una prueba.
Este ejemplo verifica 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;
}
Tenga en cuenta que la función toma 3 argumentos:
- El valor del artículo
- El índice de artículos
- La matriz en sí
Array de JavaScript indexOf()
El indexOf()
método 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;
Sintaxis
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()
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.
Matriz JavaScript 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;
Sintaxis
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 |
Búsqueda de matrices de JavaScript ()
El find()
método 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 que es mayor que 18:
Ejemplo
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Tenga en cuenta que la función toma 3 argumentos:
- El valor del artículo
- El índice de artículos
- La matriz en sí
Compatibilidad con navegador
find()
es una característica de ES6 (JavaScript 2015).
Es compatible con todos los navegadores modernos:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
find()
no es compatible con Internet Explorer.
Matriz JavaScript findIndex()
El findIndex()
método devuelve el índice del primer elemento de la matriz que pasa una función de prueba.
Este ejemplo encuentra el índice del primer elemento que es mayor que 18:
Ejemplo
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Tenga en cuenta que la función toma 3 argumentos:
- El valor del artículo
- El índice de artículos
- La matriz en sí
Compatibilidad con navegador
findIndex()
es una característica de ES6 (JavaScript 2015).
Es compatible con todos los navegadores modernos:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
findIndex()
no es compatible con Internet Explorer.
JavaScript Array.from()
El Array.from()
método devuelve un objeto Array de cualquier objeto con una propiedad de longitud o cualquier objeto iterable.
Ejemplo
Crear una matriz a partir de una cadena:
Array.from("ABCDEFG");
Compatibilidad con navegador
from()
es una característica de ES6 (JavaScript 2015).
Es compatible con todos los navegadores modernos:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
from()
no es compatible con Internet Explorer.
Claves de matriz de JavaScript ()
El Array.keys()
método devuelve un objeto Array Iterator con las claves de una matriz.
Ejemplo
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.