jQuery.each vs. for loop vs Ext.Array.each vs lodash vs while (v144)

Revision 144 of this benchmark created by bunny on

Description

Real life Test for common method for looping an array:

  • (native) classic for loop
  • (native) Array.forEach
  • .each from various frameworks: jQuery, Ext, underscore (original & fallback version)
  • emulation: Array.prototype.each
  • lodash.forEach
  • (native) for loop with node
  • for loop 140byt.es version
  • while loop

Array size: 100 (common big array size)

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js">
</script>
<script src="https://raw.github.com/bestiejs/lodash/v0.8.2/lodash.min.js"></script>
<script>var lodash = _.noConflict(); </script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js">

</script>
<script>
  $.fn.forEach = Array.prototype.forEach;
  var extArrayEach = Ext.Array.each;
  Array.prototype.each = function(func){
      var array = this, 
          i = 0, 
          l = array.length;
      while(i < l) func(array[i], i, array), i++;
      return array
    };
 var breaker = {};
  _.forEach = function(obj, iterator, context) {
    if (obj == null) return;
    if (obj.length === +obj.length) {
      for (var i = 0, l = obj.length; i < l; i++) {
        if (iterator.call(context, obj[i], i, obj) === breaker) return;
      }
    } else {
      for (var key in obj) {
        if (_.has(obj, key)) {
          if (iterator.call(context, obj[key], key, obj) === breaker) return;
        }
      }
    }
  };
  //a static array.
  var a = [];
  for (var i = 0, len = 100; i < len; i++) {
    a[i] = i + "";
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.each
$.each(a, function(index, node) {
 var e = node;
});
ready
for loop
for (var i = 0, len = a.length; i < len; i++) {
 var e = a[i];
};
ready
forEach
a.forEach(function(node, index){
 var e = node;
});
ready
Ext.Array.each
extArrayEach(a, function(index, node) {
 var e = node;
});
ready
Array.prototype.each
a.each(function(node){
  var e = node;
})
ready
_.each
_.each(a, function(node, index){
  var e = node;
})
ready
_.each (fallback)
_.forEach(a, function(node, index){
  var e = node;
})
ready
lodash.forEach
lodash.forEach(a, function(node, index){
    var e = node;
});
ready
for loop with node
for (var i = 0, node; node = a[i++];) {
 var e = node;
};
ready
for loop 140byt.es version
for (var i=a.length;--i in a;) {
  var e = a[i];
}
ready
while loop
var len = a.length;
var i = 0;
while (i < len) {
  var e = a[i++];
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.