Tratando de aprender codificando (React), mi pregunta: React usa map() en todas partes, entonces, ¿podemos reemplazar cada bucle, por ejemplo, por bucle con map? ¿Cuándo es bueno usar map y cuándo for loop? en el siguiente ejemplo que he usado for loop, ¿debería usar map?
¿Cómo se cambiaría esto a map?:
const links = currentLinks; for (let i = 0; i < links.length; ++i) { let border = links[i].boundary.points; drawPath(canvas, ctx, border, '#AA1111', '#AA1111', 0.2); } ----------------- links.map(() => ( ? ));Es una cuestión de preferencia, pero en mi libro, usar mucho los bucles significa que alguien tiene menos experiencia. La principal diferencia es que debe mantener el estado cuando usa un bucle. Y cuando usa un estado , necesita pensar en un nombre para él y, lo crea o no, a veces esa es la parte más difícil. Por otro lado, .map() , .filter() , .reduce() etc. son solo expresiones.
Usa lo que prefieras, pero úsalo sabiamente.
Dicho esto, a veces usar un bucle tiene más sentido. La regla general es que cada vez que su código genera algún tipo de efecto secundario , usar un bucle es más lógico. Considere estos dos ejemplos:
for (const fruit of fruits) { draw(fruit); } // or: fruits.forEach( fruit => draw(fruit) // makes sense ); // vs. fruits.map( fruit => draw(fruit) ); Todos funcionarán y harán lo mismo, pero el último es bastante amateur. Devuelve una matriz de lo que devuelve draw() y ese valor de retorno nunca se usa, por lo que se pierde el propósito de usar una expresión.
Para resumir:
.map()map => Para Transformación o Proyección - Da una nueva colección
loops => Por hacer alguna operación (sobre la colección en sí o en general) - No devuelve nada
Por ejemplo
const data = [1, 2, 3, 4, 5]Desea obtener los dobles de cada número en la matriz
const doubled = data.map((number, index) => number * 2); //-- Output [2, 4, 6, 8, 10]Desea llamar a algún método (o realizar alguna acción) si el elemento está entre 2 y 5
data.forEach(number => { if(number > 2 && number < 5){ //call some method } else{ //..... do some other work } }o
for(let i=0; i< data.length; i++){ const number = data[i]; if(number > 2 && number < 5){ //call some method } else{ //..... do some other work } }Sé que los ejemplos son artificiales y no muy buenos, pero espero que entiendas el punto. Déjame saber en los comentarios si tienes alguna consulta.
Actualizar Para su caso, podría usar el mapa como se muestra a continuación
links.map(link => { let border = link.boundary.points; drawPath(canvas, ctx, border, '#AA1111', '#AA1111', 0.2); });En primer lugar, si sabe que necesita salir temprano, entonces necesita usar un bucle ya que no puede regresar temprano con forEach y map (sin el uso de algo como un filtro).
También específico para reaccionar, obtendrá una nueva representación si el estado o las propiedades cambian. El uso del mapa creará una nueva matriz (al menos la referencia a la matriz) que le dará una nueva representación que a menudo se desea.