¿Cómo convierto un bucle for of en un bucle for? Esto es para poder evitar/resolver el mensaje de error de eslint. He intentado buscar en Google, pero la solución que obtengo es deshabilitar/configurar eslint. Ayúdame a entender lo que me estoy perdiendo. Aquí está el mensaje de error. " los iteradores/generadores de errores requieren regenerator-runtime, que es demasiado pesado para que esta guía los permita. Por separado, se deben evitar los bucles a favor de las iteraciones de matriz "
aquí está mi código de trabajo usando for of.
let str = ''; const arr = []; for (const person of featuredObject) { str = ` <div class="portfolio"><img src=${person.image} alt="#"></div> <div class="card-one"> <h3 class="name">${person.Name}</h3> <p class="myTitle">${person.title}</p> <p class="myDescription">${person.description}</p> </div> </div>`; arr.push(str); }aquí está mi implementación fallida del bucle for.
let str = ''; const person = ''; const arr = []; for (let i = 0; i < featuredObject.length; i += 1) { str= ` <div class="portfolio"><img src=${person.image} alt="#"></div> <div class="card-one"> <h3 class="name">${person.Name}</h3> <p class="myTitle">${person.title}</p> <p class="myDescription">${person.description}</p> </div> </div>`; arr.push(str); }let str = ""; const arr = []; for (let i = 0; i < featuredObject.length; i += 1) { const person = featuredObject[i]; str = ` <div class="portfolio"><img src=${person.image} alt="#"></div> <div class="card-one"> <h3 class="name">${person.Name}</h3> <p class="myTitle">${person.title}</p> <p class="myDescription">${person.description}</p> </div> </div>`; arr.push(str); }Mejor manera
const arr = featuredObject.map((person) => { const str = ` <div class="portfolio"><img src=${person.image} alt="#"></div> <div class="card-one"> <h3 class="name">${person.Name}</h3> <p class="myTitle">${person.title}</p> <p class="myDescription">${person.description}</p> </div> </div>`; return str; });En for of loop in person es un elemento de FeaturedObject, por lo que como todas las propiedades, pero en for loop person es una cadena, no es un elemento FeaturedObject. Estoy usando el elemento div porque si agrega un elemento a otro elemento, conserva todos los detectores de eventos, pero cuando agrega algo en innerHTML, elimina todos los detectores de eventos.
const arr = []; for (let i = 0; i < featuredObject.length; i++) { const person = featuredObject[i]; const div = document.createElement("div"); div.setAttribute("class", "portfolio"); div.innerHTML = ` <img src=${person.image} alt="#"></div> <div class="card-one"> <h3 class="name">${person.Name}</h3> <p class="myTitle">${person.title}</p> <p class="myDescription">${person.description}</p> </div>`; arr.push(div); }Use el mapa para generar la nueva matriz.
const arr = featuredObject.map((person) => ` <div class="portfolio"><img src=${person.image} alt="#"></div> <div class="card-one"> <h3 class="name">${person.Name}</h3> <p class="myTitle">${person.title}</p> <p class="myDescription">${person.description}</p> </div> </div>`);