Recorrido de Arrays con Foreach en JavaScript

Curso de Manipulación de Arrays en JavaScript

Contenido del curso

Introducción

1
Manipulación de Arrays en JavaScript para Desarrollo Full Stack
01:39 min

Fundamentos del manejo de arrays

Métodos en JavaScript

Despedida

19
Manipulación de Rides con JavaScript
00:38 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:35

Recorrido de Arrays con Foreach en JavaScript

Curso de Manipulación de Arrays en JavaScript

Clase 2 de 19

Clase 2 / 19

Recursos

El método forEach de los arrays consiste en ejecutar una función (callback) para cada uno de los elementos iterados. Iterar significa repetir una acción varias veces.

Este método recibe dos argumentos:

La función que itera cada elemento del array (obligatorio).
Un objeto al que puede hacer referencia el contexto this en la función. Si se lo omite, será undefined. Recuerde que this en arrow functions es el objeto global.

array.forEach(function(), thisArg)

La función, que recibe como argumento el método forEach, utiliza tres parámetros opcionales:

El valor actual del elemento iterado. Es decir, si es la primera iteración, será el primer elemento, y así sucesivamente.
El índice del elemento iterado. Es decir, si es la primera iteración, será el índice 0, y así sucesivamente.
El array que está iterando.

array.forEach(function(element, index, array))

Diferencia entre la estructura for y el método forEach

Los métodos de arrays nos permiten realizar algoritmos con una menor cantidad de líneas que una estructura for, con un resultado igual o parecido.

const letters=['a','b','c']

// Utilizando la estructura repetitiva for
for(let index=0; index<letters.length; index++){
    const element=letters[index]
    console.log('for',element)
}

// Utilizando el método forEach
letters.forEach(item => console.log('forEach',item))

Mostrar elementos de un array al usuario

Ahora que ya conoces cómo funciona el método forEach, utilízalo para agregar elementos al HTML y así que el usuario lo mire.

Por ejemplo, en un archivo HTML agrega una etiqueta div con un id app, que nos servirá para agregar nuestros elementos.

<div id="app"></div>

Después crea la lógica en un archivo de JavaScript.

const products = [
  { title: 'Burger', price: 121 },
  { title: 'Pizza', price: 20 },
  { title: 'Soda', price: 5 },
]

const app = document.getElementById('app')

products.forEach(product => {
  app.innerHTML += `<li>${product.title} -$ ${product.price}</li>`
})

Y listo, en pantalla aparecerán los elementos del array products con su título y precio. Revisa el resultado en este codi.link.

Ejercicio utilizando la función forEach

Crea una lista de tareas, a partir de un array que contenga el título y el estado (completado o no) y muéstralos en un archivo HTML. Puedes utilizar un input de tipo checkbox para indicar el estado de la tarea. ¡Comparte tu trabajo en la sección de aportes!

Contribución creada por: Andrés Guano.

Samuel Alvarez

Hace 5 años

Tip

En el curso de Manipulación del DOM el profesor nos dice lo malo que es para el performance hacer muchas llamadas al DOM por lo que si quieres mejorar esto un poco, podrias:

En lugar de insertar en cada llamado al HTML, los almacenamos todos en un array

const nodes = []

y luego en cada llamado lo añadimos al array

tasks.forEach(({ title, done }) => {
    const element = `
         <li>
          	 <input 
                     type='checkbox' 
                     id='${title}' 
                     name='${title}' 
                     ${done && 'checked'} />
                  <label for='${title}' >${title} </label>   
         </li>`;
nodes.append(element)

por último añadimos todo el array al DOM

app.append(nodes)

De esta forma reducimos la cantidad de inserciones al DOM, y mejoramos el performance un poco :)

José Isidro Torres Caldea

Hace 5 años

Dato curioso

para que la casilla aparezca seleccionada se usa (en mi caso) ${tarea.estado==='Terminada' && 'checked'} y esto sucede porque se hace una comparación lógica con el operador &&, este operador en Javascript es peculiar (como muchas otras cosas) porque no funciona como en otros lenguajes que normalmente esperan tipos de datos o expresiones que retornen booleanos. Trabaja de la siguiente manera:

Dada la comparación expr1 && expr2 Devuelve expr1 si se puede convertir a false; de lo contrario, devuelve expr2. Por lo tanto, cuando se usa con valores booleanos, && devuelve true si ambos operandos son true; de lo contrario, devuelve false.

Es por eso que cuando el estado de la tarea es "Terminada" me retorna el valor del lado derecho, es decir, checked. Cuando el valor del lado izquierdo me retorna false, automáticamente toda la expresión me retorna este valor y en el archivo HTML quedará algo como esto <input type="checkbox" id="Facturar" name="Facturar" false> , lo pueden comprobar en el navegador; para que no quede ese false (que personalmente no me agrada), también podemos usar el operador ternario ${tarea.estado==='Terminada' ? 'checked': ''}

Excelente tip, Samuel, hice mi ejercicio basándome en él.

const tareas = [{name:"Licitar", estado:"Terminada"},{name:"Facturar", estado:"pendiente"}, {name:"Revisar correo", estado:"Terminada"}];

function verTareas()
{

    let tareasTotales = ``;
    tareas.forEach((tarea) => {

        tareasTotales += `<input 
        type='checkbox' 
        id='${tarea.name}' 
        name='${tarea.name}' 
        ${tarea.estado==='Terminada' && 'checked'} />
        <label for='${tarea.name}' >${tarea.name} </label> <br>`;
    });

    return tareasTotales;

}

const obtenerTareas = verTareas(tareas);

const imprimirTareas = document.getElementById("mostrarTareas");

imprimirTareas.insertAdjacentHTML("beforeend", obtenerTareas);

César Palma

Hace 5 años

Esto aplica cuando trabajamos con vanilla js, los frameworks realizan trabajos de optimización y renderizan de una sola vez en el dom

Comentarios (303)303 comentarios

Jose Saúl Guerrero Serrano

Elizabeth Rivera Ura

Juan Jose Hernandez Garcia

Joel Moises Boada Velasquez

Joselo Mantilla

Stephany Plaza

Hace 4 años

Kevin Alexander Chari Castillo

Alfredo Olmedo

Eduardo Peña Ramos

Rubén Ernesto Aragón Gil

Natalia Ortiz Maldonado

David Hilera

jonathan gonzalez

Jose Nuñez

Nicolas Molina

Profesor

David Saavedra Vázquez

Diego Alejandro Presiga

Gustavo Adolfo Perez Ramos

Diego Rodriguez

Diego Fernando Caviedes Camaho

David Alidhasem Manzanares Casio

Cristobal Nyram

Martín Gutiérrez Hernández

Leoneider Trigos Guerrero

Juan Gui Arenas

Reinaldo Mendoza

Madeliy Ricra Gutierrez

Juan sebastian cardona lopez

Omar Barragán moreno

Miguel Ángel Holguín González

Jeremy Orellana

María Alejandra de los Ángeles

Angel Vega

Gonzalo Palacios

Introducción

Manipulación de Arrays en JavaScript para Desarrollo Full Stack

Fundamentos del manejo de arrays

Recorrido de Arrays con Foreach en JavaScript

Mutabilidad vs Inmutabilidad en Programación JavaScript

Uso de Map para Transformaciones en JavaScript y Renderizado HTML

Transformaciones avanzadas con map en JavaScript

Filtrado de Arrays en JavaScript con el Método Filter

Uso del método reduce en JavaScript para sumar elementos de un array

Contar elementos en un array con reduce y agrupar por rango

Métodos en JavaScript

Uso de la función "sum" en JavaScript para evaluar condiciones

Uso del método `every` en JavaScript para validaciones de arrays

Uso de los métodos find y findIndex en JavaScript

Uso del método includes en JavaScript para arrays y strings

Unificación y separación de arrays con join y split en JavaScript

Fusión de Arrays con Concat y Operador Spread en JavaScript

Aplanar Arrays en JavaScript con Flat y FlatMap

Uso de FlatMap para Extraer Fechas de Calendarios en JavaScript

Métodos Mutables e Inmutables en Arrays: Manipulación y Búsqueda

Ordenamiento de Arrays con el Método Sort en JavaScript

Despedida

Manipulación de Rides con JavaScript

Recorrido de Arrays con Foreach en JavaScript

Progreso del curso

Introducción

Fundamentos del manejo de arrays

Métodos en JavaScript

Despedida

Recursos

Recursos