JavaScript JS

JavaScript forEach: Recorrer los elementos de arrays

Nueva entrada para repasar la función de JavaScript forEach, su finalidad es la de recorrer los direntes elementos que hay dentro de un array.

Otras funciones de JavaScript:

Sintaxis de JavaScript forEach

Veamos la sintaxis obtenida de su web oficial siendo muy similar a las funciones de otros lenguajes como jQuery each() y PHP foreach():

NombreArray.forEach(function(valor, index, array), thisValue)

Tal y como podéis ver forEach() llama a la función por cada elemento en el array, es decir, si el array tiene 5 elementos la función será invocada en 5 ocaciones. Repasemos el código:

  • nombreArray (Obligatorio): Array que vamos a recorrer.
  • valor (Obligatorio): Valor del elemento.
  • index: Posición  del elemento.
  • array: Array donde se está aplicando la función –> ¿¿¿Utilidad???

Ejemplo para recorrer arrays en JavaScript

Veamos un simple ejemplo de esta función:

var miArray = ['a', 'b', 'c', 'd', 'e'];
miArray.forEach(miFuncion);

function miFuncion(elemento, indice) {
    $("#parrafo").append( "Indice: " + indice + " Valor: " + elemento + "<br>");
}

Os explico el ejemplo:

  • Creamos un array con 5 letras.
  • Recorremos el array ‘miArray’ creado anteriormente llamando a la función ‘miFuncion’.
  • Con la función append de jQuery muestro por pantalla los valores del array con su posición en el índice.

El código del párrafo donde se muestran los resultados es el siguiente.

<p id="parrafo">Después de este texto se insertan automáticamente por los valores del array<br></p>
compartir
Publicado por
Aner Barrena