26-iteracion de matriz en Javascript

Jorge Catalao noviembre 15, 2023

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

Matriz para cada uno ()

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:

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

Salida
    Llama a una función una vez para cada elemento de la matriz.
    45
    4
    9
    16
    25

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

  1. El valor del artículo
  2. El índice de artículos
  3. La matriz en sí
    <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>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

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

Salida
    Llama a una función una vez para cada elemento de la matriz.
    45
    4
    9
    16
    25

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 los elementos de la matriz sin valores.

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

Este ejemplo multiplica su valor por (2)

Ejemplo:

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

Salida
    Crea una nueva matriz realizando una función en cada elemento de la matriz:
    90,8,18,32,50


...

Esta función toma 3 argumentos:

  1. El valor del artículo
  2. El índice de artículos
  3. La matriz en sí

Cuando una función de devolución de llamada usa solo el parámetro de valor, el índice y la matriz pueden omitirse:

Ejemplo:

    <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>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

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

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

Salida
    Crea una nueva matriz realizando una función en cada elemento de la matriz.
    90,8,18,32,50

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

En el ejemplo, vamos a crear una matriz con elementos teniendo su valor superior a 18:

Ejemplo:

    <h2>JavaScript Array.filter()</h2>
<p>Crea una nueva matriz con todos los elementos de la matriz que pasan una prueba.</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>
 

Salida
Crea una nueva matriz con todos los elementos de la matriz que pasan una prueba.
45,25

La función toma 3 argumentos:

  1. El valor del artículo
  2. El índice de artículos
  3. La matriz en sí

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

Ejemplo:

    <h2>JavaScript Array.filter()</h2>
<p>Crea una nueva matriz con todos los elementos de la matriz que pasan una prueba.</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>
 

Salida
Crea una nueva matriz con todos los elementos de la matriz que pasan una prueba.
45,25

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. Ver 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:

Ejemplo:

    <h2>JavaScript Array.reduce()</h2>
<p>Este ejemplo encuentra la suma de todos los números en una matriz:</p>

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

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

document.getElementById("demo").innerHTML = "La suma es: " + sum;

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

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

La suma es: 99

Esta función toma 4 argumentos:

  1. El total (el valor inicial / valor previamente devuelto)
  2. El valor del artículo
  3. El índice de artículos
  4. La matriz en sí

El ejemplo anterior no utiliza los parámetros de índice y matriz.

Así que podemos reescribir el código de la siguiente forma:

Ejemplo:

    <h2>JavaScript Array.reduce()</h2>
<p>Este ejemplo encuentra la suma de todos los números en una matriz:</p>

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

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

document.getElementById("demo").innerHTML = "La suma es: " + sum;

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

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

La suma es: 99

El metodo reduce() puede aceptar un valor inicial:

Ejemplo

    <h2>JavaScript Array.reduce()</h2>
<p>Este ejemplo encuentra la suma de todos los números en una matriz:</p>

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

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

document.getElementById("demo").innerHTML = "La suma es: " + sum;

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

Salida
    La suma es: 199

Método reduceRight()

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

El método reduceRight() funciona de derecha a izquierda en la matriz. Ver 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

    <h2>JavaScript Array.reduceRight()</h2>
<p>Este ejemplo encuentra la suma de todos los números en una matriz:</p>

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

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

document.getElementById("demo").innerHTML = "La suma es: " + sum;

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

Salida
    La suma es: 99

La función toma 4 argumentos:

  1. El total (el valor inicial / valor previamente devuelto)
  2. El valor del artículo
  3. El índice de artículos
  4. La matriz en sí

El ejemplo anterior no utiliza los parámetros de índice y matriz, así que podemos escribir el código sin esos parámetros:

Ejemplo:

    <h2>JavaScript Array.reduceRight()</h2>
<p>Este ejemplo encuentra la suma de todos los números en una matriz:</p>

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

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

document.getElementById("demo").innerHTML = "La suma es: " + sum;

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

Salida
    La suma es: 99

Método every()

El método every() verifica 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

    <h2>JavaScript Array.every()</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 allOver 18 = numbers.every(myFunction);
 
 document.getElementById("demo").innerHTML = "Todo mayor de 18 es: " + allOver18;
 
 function myFunction(value, index, array) {
   return value > 18;
 }
 </script>        
        
 

Salida
Todo mayor de 18 es: falso

La función toma 3 argumentos:

  1. El valor del artículo
  2. El índice de artículos
  3. 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:

    <h2>JavaScript Array.every()</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 allOver 18 = numbers.every(myFunction);
 
 document.getElementById("demo").innerHTML = "Todo mayor de 18 es: " + allOver18;
 
 function myFunction(value) {
   return value > 18;
 }
 </script>        
        
 

Salida
Todo mayor de 18 es: falso

Metodo some()

El metodo some() comprueba si algunos valores de matriz pasan una prueba.

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

Ejemplo

    <h2>JavaScript Array.some()</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 = "Algunos mayores de 18 es: " + someOver18;

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

Salida
Algunos mayores de 18 es: verdad

La función toma 3 argumentos:

  1. El valor del artículo
  2. El índice de artículos
  3. La matriz en sí

Método 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.

Busque en una matriz el elemento "Apple":

Ejemplo:

    <h2>JavaScript Array.indexOf()</h2>
 <p id="demo"></p>
 
 <script>
 const fruits = ["Apple", "Orange", "Apple", "Mango"];
 let position = fruits.indexOf("Apple") + 1;
 
 document.getElementById("demo").innerHTML = "Apple se encuentra en la posición:" + position;
 </script>    
 

Salida
    Apple se encuentra en la posición: 1

Sintaxis 

    array.indexOf(item, start)

item (artículo) requerido. 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 final.

Si no se encuentra el elemento, indexOf() devuelve (-1).

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

Método lastIndexOf():

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

Ejemplo:

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

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

document.getElementById("demo").innerHTML = "Apple se encuentra en la posición: " + position;
</script>  
 

Salida
    Apple se encuentra en la posición: 3

Sintaxis 

    array.lastIndexOf(item, start)

item (artículo) requerido. El elemento a buscar.

atart - 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 final.

Método find():

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

Ejemplo:

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

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

document.getElementById("demo").innerHTML = "El primer número mayor que 18 es: " + first;

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

salida:
El primer número mayor que 18 es: 25

La función toma 3 argumentos:

  1. El valor del artículo
  2. El índice de artículos
  3. La matriz en sí

Método findIndex():

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

Ejemplo:

    <h2>JavaScript Array.findIndex()</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>



salida:
El primer número mayor de 18 tiene índice 3

Metodo Array.from()

El metodo array.from() devuelve un objeto Array de cualquier objeto con una longitud propiedad o cualquier objeto iterable.

Ejemplo

    <h2>JavaScript Arrays</h2>
<p>The Array.from() method returns 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>

Salida:
A,B,C,D,E,F,G

Metodo Array.keys()

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

Ejemplo

    <h2>JavaScript Arrays</h2>
<p>El método Array.keys() devuelve un objeto Array Iterator con las claves de la matriz.</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>


Salida:
El método Array.keys() devuelve un objeto Array Iterator con las claves de la matriz.
0
1
2
3

Metodo incluye ()

El metodo incluye() nos permite verificar si un elemento está presente en una matriz (incluido NaN, a diferencia de indexOf).

Ejemplo

    <h1>Array includes()</h1>
<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>


Salida:
true

Nota: Metodo no suportado por Edge 13






Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias