Breaking Bad (bucles en las bibliotecas de JavaScript)

Fue una especie de sorpresa para mí cuando descubrí inconsistencias en las bibliotecas de JavaScript más populares en la forma en que manejan sus bucles each y forEach. Esta publicación compara:

  • bucle forEach en JavaScript nativo
  • cada Loop en Lo-Dash
  • cada bucle en jQuery
  • cada bucle en Underscore.js
  • forEach Loop en Underscore.js

forEach Loop en JavaScript nativo

Las bibliotecas de JavaScript son importantes (por ejemplo, jQuery, Lo-Dash, Underscore), pero en el caso de bucles funcionales (forEach y each ) crean mucha confusión (el bucle for se puede romper con 'romper'). Inspeccionemos el ejemplo de código JavaScript nativo para el forEach método:

[1,2].forEach(function(v){
  alert(v);
  return false;
})

Esto nos mostrará dos cuadros de alerta. Pruebe usted mismo el código JavaScript nativo en JSFiddle.

Este es un comportamiento esperado en la mayoría de los casos porque con cada iteración invocamos una nueva función. A diferencia del for (var i=0; i<arr.length; i++) {} código que no tiene función/iteradores.

Sin embargo, en Lo-Dash y jQuery, un código similar rompe los bucles.

Romper cada bucle en Lo-Dash

El código Lo-Dash con each produce solo una alerta :

_.each([1,2],function(v){
  alert(v);
  return false;
})

Pruebe el código Lo-Dash anterior usted mismo en JSFiddle.

Romper cada bucle en jQuery

Asimismo, jQuery each ejemplo muestra solo la primera alerta:

$.each([1,2],function(i, v){
  alert(v);
  return false;
})

Pruebe el código jQuery usted mismo en JSFiddle.

No interrumpir cada bucle en Underscore.js

Para complicar las cosas, Underscore.js y Backbone.js se mantienen fieles a la interpretación nativa de JavaScript.

El guión bajo.js each ejemplo que itera a través de cada elemento y no se rompe :

_.each([1,2],function(v){
  alert(v);
  return false;
})

Prueba el guión bajo each método en JSFiddle.

Ciclo forEach sin interrupción en Underscore.js

Solo porque sí, el guión bajo forEach() fue probado. Produjo de manera confiable los resultados similares a los nativos forEach() :¡dos alertas!

El guión bajo forEach() código:

_.forEach([1,2],function(i, v){
  alert(v);
  return false;
})

Pruebe Underscrore.js forEach() código usted mismo en JSFiddle.

[Nota al margen]

Leer publicaciones de blog es bueno, pero ver cursos en video es aún mejor porque son más atractivos.

Muchos desarrolladores se quejaron de la falta de material de video de calidad asequible en Node. Es una distracción ver videos de YouTube y una locura pagar $ 500 por un curso de video de Node.

Visite Node University, que tiene cursos de video GRATUITOS en Node:node.university.

[Fin de la nota al margen]

La diferencia de descifrado de códigos entre Low-Dash y Underscore

La conclusión de esta breve publicación es que Lo-Dash no es igual a Underscore , a menos que se utilice una versión especial compatible con guiones bajos. Esto me lo señaló amablemente John-David Dalton (@jdalton):

PD:guión bajo.js forEach es más compatible con el navegador que el forEach nativo porque este último fue una adición posterior a la API de JavaScript y no es compatible con navegadores más antiguos.