El contenido de origen se puede encontrar aquí: https://github.com/LinkedInLearning/javascript-essential-training-2832077/tree/main/08_17 . El código en cuestión es este bloque de aquí:
import backpackObjectArray from "./components/data.js"; const content = backpackObjectArray.map((backpack)=>{ let backpackArticle = document.createElement("article"); backpackArticle.classList.add("backpack"); // Set article ID to the backpack.id property backpackArticle.setAttribute("id", backpack.id); backpackArticle.innerHTML=` <figure class="backpack__image"> <img src=${backpack.image} alt="" /> </figure> <h1 class="backpack__name">${backpack.name}</h1> <ul class="backpack__features"> <li class="packprop backpack__volume">Volume:<span> ${ backpack.volume }l</span></li> <li class="packprop backpack__color">Color:<span> ${ backpack.color }</span></li> <li class="backpack__age">Age:<span> ${backpack.backpackAge()} days old</span></li> <li class="packprop backpack__pockets">Number of pockets:<span> ${ backpack.pocketNum }</span></li> <li class="packprop backpack__strap">Left strap length:<span> ${ backpack.strapLength.left } inches</span></li> <li class="packprop backpack__strap">Right strap length:<span> ${ backpack.strapLength.right } inches</span></li> <li class="feature backpack__lid">Lid status:<span> ${ backpack.lidOpen ? "open" : "closed" }</span></li> </ul> `; return backpackArticle; }) const main = document.querySelector(".maincontent"); content.forEach((backpack)=>{ main.append(backpack); } )
En esencia, ¿es posible usar forEach loop para generar el mismo resultado que cuando usamos el método de matriz map(), que es generar un artículo HTML para cada objeto?
*Pseudo-code* Array.prototype.map(function(ea){return backpackArticle})
simplemente creará una nueva matriz e incluirá lo que devuelvas en cada iteración.
Puedes lograr lo mismo de otras formas, pero, como ya se dijo, con más código. En realidad, la 'importancia' en este caso es simplemente lograr el resultado deseado con menos código.
Creo que en su ejemplo, es crear explícitamente una nueva matriz y luego agregar explícitamente cada artículo de backpackArticle
a <main>
usando un forEach. Puede omitir la creación de la nueva matriz con el mapa.
Definitivamente puede usar un bucle forEach si lo desea, el código será un poco diferente. No es necesario usar el mapa si le gusta cómo se ve el nuevo código.
import backpackObjectArray from "./components/data.js"; const main = document.querySelector(".maincontent"); backpackObjectArray.forEach((backpack) => { let backpackArticle = document.createElement("article"); backpackArticle.classList.add("backpack"); // Set article ID to the backpack.id property backpackArticle.setAttribute("id", backpack.id); backpackArticle.innerHTML = ` <figure class="backpack__image"> <img src=${backpack.image} alt="" /> </figure> <h1 class="backpack__name">${backpack.name}</h1> <ul class="backpack__features"> <li class="packprop backpack__volume">Volume:<span> ${ backpack.volume }l</span></li> <li class="packprop backpack__color">Color:<span> ${ backpack.color }</span></li> <li class="backpack__age">Age:<span> ${backpack.backpackAge()} days old</span></li> <li class="packprop backpack__pockets">Number of pockets:<span> ${ backpack.pocketNum }</span></li> <li class="packprop backpack__strap">Left strap length:<span> ${ backpack.strapLength.left } inches</span></li> <li class="packprop backpack__strap">Right strap length:<span> ${ backpack.strapLength.right } inches</span></li> <li class="feature backpack__lid">Lid status:<span> ${ backpack.lidOpen ? "open" : "closed" }</span></li> </ul> `; main.append(backpackArticle); });
EDITAR
Lo siento, parece que no he leído tu pregunta con suficiente atención. En su caso, sí, puede intercambiar .map
con .forEach
y agregar los elementos creados directamente sin almacenarlos en una matriz intermedia.
Sin embargo, dejaré el resto como está, tal vez a alguien le resulte útil.
Como respuesta un tanto general, "sí, podría usar .forEach
y obtener los mismos resultados". Y también puedes hacerlo con .reduce
. Sin embargo, si desea tener una lista de resultados de una lista de fuentes (como en su ejemplo), .map
es el camino a seguir.
Voy a responder a su pregunta de una manera más general, porque me parece que está preguntando sobre la diferencia entre
.forEach
y.map
en general.
Cada método en Array.prototype
está ahí para un propósito. El propósito de .map
es proyectar (o "mapear", de ahí el nombre) una función sobre todos los elementos de una lista. Entonces, si desea pasar de una lista de valores a una lista de otros valores, puede usar .map
.
const sources = [1, 2, 3, 4, 5]; const results = sources.map(n => n + 1); console.log(results); // logs [2, 3, 4, 5, 6]
Para obtener lo mismo con .forEach
, tendría la misma cantidad de variables pero dos pasos más que debe programar: uno para crear la matriz de results
, otro para agregarle los elementos manualmente.
const sources = [1, 2, 3, 4, 5]; const results = []; sources.forEach(n => { results.push(n); }); console.log(results);
Por comparación directa, puede ver fácilmente que el uso .forEach
da como resultado un poco más de código que es menos declarativo y más imperativo en estilo.
Como se mencionó anteriormente, también podría usar .reduce
para mapear una función sobre un valor y acumularlo en una lista resultante. De hecho, se puede escribir una gran cantidad de operaciones utilizando .reduce
. Si tiene curiosidad, busque transducers
, hay varias bibliotecas en varios idiomas disponibles.
Pero volvamos al ejemplo usando reduce
:
const sources = [1, 2, 3, 4, 5]; const results = sources.reduce((acc, n) => acc.concat(n + 1), []); console.log(results); // logs [2, 3, 4, 5, 6]