Métodos de iteración de matriz de JavaScript

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

Estos son los métodos que vamos a ver:

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.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
<h2>Javascript Array.forEach()</h2>
<p>Llama a una función una vez para cada elemento de la matriz</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [2, 4, 23, 90];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

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

Observa que la función tiene 3 argumentos:

  • El item value
  • El item index
  • El item array

El ejm siguiente usa solamente un valor como parámetro, veamos el ejm.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
<h2>Javascript Array.forEach()</h2>
<p>Llama a una función para cada uno de los valores del Array</p>
<p id="demo"></p>

<script>
var txt = "";
var numbers = [3, 9, 33, 78];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(Value)
{
txt = txt + Value + "<br />";
}
</script>
</body>
</html>

Array.forEach() es soportado por todos los navegadores excepto por Internet Explorer 8 o anteriores.

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.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
<h2>Javascript Array.map()</h2>
<p>Crea una nueva matriz realizando una función en cada elemento de la matriz</p>
<p id="demo"></p>

<script>
var numbers1 = [1, 3, 4, 8, 99];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array)
{
return value * 2;
}
</script>
</body>
</html>

Observa que la función toma 3 argumentos.

  • El item value
  • El item index
  • El item array

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:

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value) {
return value * 2;
}
</script>

</body>
</html>

Array.filter()

El método filter() 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 mayor que 18.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>Javascript Array.filter()</h2>
<p>Crea una nueva matriz con todos los elementos de la matriz que pasa una prueba.</p>
<p id="demo"></p>

<script>
var numbers = [23, 32, 99, 10, 2];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array)
{
return value > 18;
}
</script>
</body>
</html>

Observa que la función toma 3 argumentos:

  • El item value
  • El item index
  • El item array

En el ejm de abajo vamos a obviar dos de los valores, quedándonos tan sólo con uno.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value) {
return value > 18;
}
</script>

</body>
</html>

Array.reduce()

El método reduce() ejecuta una función en cada elemento de la matriz para producir (reducirlo a) un solo valor. El método reduce() funciona de izquierda a derecha en la matriz. Consulta también reduceRight(). El método reduce() no reduce la matriz original. Este ejemplo encuentra la suma de todos los números en una matriz.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>Javascript Array.reduce()</h2>
<p>Este ejm encuentra la suma de todos los números en un Array</p>
<p id="demo"></p>

<script>
var numbers = [23, 44, 8, 97];
var suma = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = suma;

function myFunction(total, value, index, array)
{
return total + value;
}
</script>
</body>
</html>

Observa que la función toma 4 argumentos:

  • total (el valor inicial, previamente el valor devuelto)
  • El item value
  • El item index
  • El array mismo

El ejm de arriba se puede escribir de la siguiente manera.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
return total + value;
}
</script>

</body>
</html>

El método reduce() puede tomar un valor inicial.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>
<p>This example finds the sum of all numbers in an array:</p>
<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction, 100);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
return total + value;
}
</script>

</body>
</html>

Array.reduce() es compatible con todos los navegadores excepto Internet Explorer 8 o versiones anteriores.

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. Consulta 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.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduceRight()</h2>
<p>This example finds the sum of all numbers in an array:</p>
<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
return total + value;
}
</script>

</body>
</html>

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

  • El total (el valor inicial / valor devuelto previamente)
  • El valor del artículo
  • El índice de artículos
  • La propia matriz

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

Ejm

var numbers1 = [45491625];
var sum = numbers1.reduceRight(myFunction);

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

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.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>Javascript Array.every()</h2>
<p>El método every() comprueba si todos los valores de la matriz pasan una prueba.</p>
<p id="demo"></p>

<script>
var numbers = [3, 7, 9, 10, 35];
var allOver8 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "Todos son mayores que 8 es " + allOver8;

function myFunction(value, index, array)
{
return value > 8;
}
</script>
</body>
</html>

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

  • El valor del artículo
  • El índice de artículos
  • La propia matriz

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

Ejm

var numbers = [45491625];
var allOver18 = numbers.every(myFunction);

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

Array.some()

El método some() comprueba si algunos valores de la matriz pasan una prueba. Este ejemplo verifica si algunos valores de matriz son mayores que 18.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.some()</h2>
<p>The some() method checks if some array values pass a test.</p>
<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;

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

</body>
</html>

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

  • El valor del artículo
  • El índice de artículo
  • La propia matriz

Array.some() es compatible con todos los navegadores excepto Internet Explorer 8 o anterior.

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.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.indexOf()</h2>
<p id="demo"></p>

<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + a;
</script>

<p>The indexOf() does not work in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

Su sintaxis es

array.indexOf(item, start)

Donde

item Necesario. El elemento a buscar
start Opcional. Dónde comenzar la búsqueda. Los valores negativos comenzarán en la posición dada contando desde el final y la búsqueda hasta el final

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.

Array.lastIndexOf()

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

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.lastIndexOf()</h2>
<p id="demo"></p>

<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
</script>

<p>The lastIndexOf() does not work in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

Su sintaxis es la siguiente:

array.lastIndexOf(item, start)

Donde

item Necesario. El elemento a buscar
start Opcional. Dónde comenzar la búsqueda. Los valores negativos comenzarán en la posición dada contando desde el final y buscarán hasta el principio

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 que es mayor que 18.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.find()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var 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>

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

  • El valor del artículo
  • El índice de artículos
  • La propia matriz

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 que es mayor que 18.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.findIndex()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 has index " + first;

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

</body>
</html>

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

  • El valor del artículo
  • El índice de artículos
  • La propia matriz