domingo, 1 de septiembre de 2019

Iterar con un forEach en JavaScript

Disponemos de un array con varios elementos y deseamos listar estos elementos mostrándolos por pantalla.

Veremos varios casos.
  1. con función externa
  2. con función anónima
  3. con función de flecha
  4. con función de flecha de parámetro único

con función externa

HTML

Tenemos un párrafo con el id="mt".

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Iterar con un forEach en JS</title>  
  </head>  
  <body>  
   <h2>Listar los elementos de un array</h2>   
   <p id="mt"></p>  
   <script src="script.js"></script>  
  </body>  
 </html>

JavaScript

La función usa tres parámetros.
  1. El primero v es el valor (value), también denominado item.
  2. El segundo parámetro i es el índice (index) o key. 
  3. El tercer argumento arr recoge el array completo.
El tercer argumento habitualmente no se utiliza ya que con el valor y el index podemos iterar todos los elementos.

 var m = ["enero", "febrero", "marzo", "abril", "mayo"];  
 m.forEach(myFunction);  
 function myFunction(v,i,arr) {  
  document.getElementById("mt").innerHTML += i+": "+v+"<br>";  
 }

La función acepta tres parámetros: el valor del elemento, el índice y una referencia al array que se está iterando. Los dos últimos argumentos son opcionales.

con función anónima

HTML

Igual que el anterior.

JavaScript

En este caso la función ya no es externa y con nombre sino que ahora es una función anónima callback. En este ejemplo estamos usando los dos parámetros valor e index.

 var m = ["enero", "febrero", "marzo", "abril", "mayo"];  
 m.forEach(function(v,i){  
  document.getElementById("mt").innerHTML += i+1+": "+v+"<br>";  
 });

con función de flecha

JavaScript

Utilizamos una función flecha con dos parámetros.

 var m = ["enero", "febrero", "marzo", "abril", "mayo"];  
 m.forEach((v,i) => {document.getElementById("mt").innerHTML += i+1+": "+v+"<br>"});

con función de flecha de parámetro único

HTML

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Iterar con un forEach en JS</title>  
  </head>  
  <body>  
   <h2>Listar los elementos de un array</h2>  
   <ul id="ml"></ul>  
   <script src="script.js"></script>  
  </body>  
 </html>

JavaScript

En este caso únicamente utilizamos el parámetro v para el valor.

 var m = ["enero", "febrero", "marzo", "abril", "mayo"];  
 m.forEach(v=>{document.getElementById("ml").innerHTML+="<li>"+v+"</li>"});
en
Etiquetas:

1 comentario:

Suscribirse a: Enviar comentarios (Atom)