AngularJS forEach vs Native forEach vs key vs for

JavaScript performance comparison

Revision 19 of this test case created by

Preparation code 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js">
</script>
<script>
  var len = 1000;
  var arr = new Array();
  while (len--) {
    arr[len] = len;
  }
</script>
      

      <script>

        Benchmark.prototype.setup = function() {

          
  var a = angular, u = {};
  
  	a.forEach = function(obj, iterator, context) {
  		var key, objLen;
  		if (obj) {
  			if (a.isFunction(obj)) {
  				for (key in obj) {
  					// Need to check if hasOwnProperty exists,
  					// as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
  					if (key !== 'prototype' && key !== 'length' && key !== 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
  						iterator.call(context, obj[key], key);
  					}
  				}
  			} else if (u.isArray(obj) || u.isArrayLike(obj)) {
  				objLen = obj.length; key = 0;//cached length is faster!
  				for (; key < objLen; key++) {
  					iterator.call(context, obj[key], key);
  				}
  			} else if (obj.forEach && obj.forEach !== a.forEach) { //https://github.com/angular/angular.js/commit/36625de0d3ebc1fc091af474d942c6ce16b0a1c0
  				obj.forEach(iterator, context);
  			} else {
  				for (key in obj) {
  					if (obj.hasOwnProperty(key)) {
  						iterator.call(context, obj[key], key);
  					}
  				}
  			}
  		}
  		return obj;
  	};
  
  	u.isWindow = function(obj) {
  		return obj && obj.document && obj.location && obj.alert && obj.setInterval;
  	};
  	
  	u.isArray = (function() {
  		if (!a.isFunction(Array.isArray)) {
  			return function(value) {
  				return toString.call(value) === '[object Array]';
  			};
  		}
  		return Array.isArray;
  	})();
  
  	u.isArrayLike = function(obj) {
  		if (obj === null || u.isWindow(obj)) {
  			return false;
  		}
  
  		var length = obj.length;
  
  		if (obj.nodeType === 1 && length) {
  			return true;
  		}
  
  		return a.isString(obj) || a.isArray(obj) || length === 0 || typeof length === 'number' && length > 0 && (length - 1) in obj;
  	};
  
  
  
  
  function test7WithFn(arr, fn) {
    var i = 0, arrLen = arr.length;
    for (; i < arrLen; i++) {
      fn(arr[i]);
    }
  }
  

        
  };


      
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Native forEach 
arr.forEach(function(item) {
  item;
});
 pending…
AngularJS forEach 
angular.forEach(arr, function(item) {
  item;
});
 pending…
for key in arr 
for (var key in arr) {
  arr[key];
}
 pending…
for loop 
for (i = arr.length - 1; i >= 0; i--) {
  arr[i];
}
 pending…
for loop, super-cached i and arr length, simpler! 
var i,arrLen = arr.length;
for (i = 0; i < arrLen; i++) {
  arr[i];
}
 pending…
for loop, simple (with var) 
for (var i = 0; i < arr.length; i++) {
  arr[i];
}
 pending…
for loop, improved super-cached i and arr length, even simpler! 
var i = 0,arrLen = arr.length;
for (; i < arrLen; i++) {
  arr[i];
}
 pending…
AngularJS forEach with Improved forEach Method 
angular.forEach(arr, function(item) {
  item;
});
 pending… 
test7WithFn(arr, function(item) { item; });
 pending…

Compare results of other browsers

Revisions

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

0 Comments