Últimamente he estado trabajando en una aplicación que solo cuenta con front-end, ya que el cliente nos proporciona en back-end.
Debido a que muchos de los datos no se nos dan de la manera exacta que necesita el front, he tenido que procesar los datos para poder mostrarlos como se requería.
Mientras pensaba en cómo hacer ésta tarea se me pasó una duda por la cabeza:
Cual es el bucle más eficiente en JavaScript?
Ésta pregunta tiene diferentes respuestas según lo que estemos buscando.
Seguramente lo primero que se nos viene a la cabeza es lo siguiente:
const arr = [...]; let i = 0; while(arr.length > i){ const element = arr[i]; i++; } El típico bucle while de toda la vida, el cual no termina hasta que la condición especificado al inicio sea cumplida. Éste bucle se usa principalmente en ocasiones en las que no se sabe de antemano la cantidad de iteraciones que se llevarán a cabo.
La principal desventaja es que es difícil de interpretar al echar un primer vistazo, y ciertamente es más lento a la hora de recorrer una array.
const arr = [...]; for(let i = 0; i < arr.length; i++){ const element = arr[i]; } El bucle for es otro método muy utilizado a la hora de recorrer una array. Éste funciona de una manera similar al while, ya que creamos una variable, en cada iteración comprobamos una condición y finalmente pasamos a la siguiente iteración.
La ventaja que tiene éste bucle en comparación al while, es que es más sencillo de interpretar.
El for es una buena opción a la hora de recorrer un array, mientras que el while no es muy eficiente, pero mi principal problema era que la aplicación debía ser lo más rápida posible.
Entonces se me ocurrió la siguiente idea:
const new_array = array_imgs.map((imgs)=>{ for (let i = 0; i < imgs.length; i++) { const element = imgs[i]; if (element.id == item.id) { return expedient.image = element.imagen; } } return item.img = null; }) Debido a que estaba tratando con imagenes, las cuales son pesadas y costosas de procesar, necesitaba que el bucle hiciera las mínimas iteraciones posibles.
Se me ocurrió recorrer el array con la función map(). La cual según estuve investigando, es la manera más rápida de recorrer un array (aparte de la función forEach() del propio array), además me permitía modificar crear un array nuevo con los datos nuevos y hacer las mínimas iteraciones.
Fué la manera más eficiente que se me pasó por la cabeza. Tras probar varios métodos, puedo decir que es el mejor que he probado.
Solución de chat-gpt
También se me ocurrió preguntar a chat-gpt la solución a mi problema y me ha presentado lo siguiente:
array_imgs.forEach((imgs) => { const element = imgs.find(element => element.id === item.id); if (element) { expedient.image = element.imagen; } else { item.img = null; } }); Se te ocurre alguna idea mejor? Déjamelo en los comentarios!!