Iterate array checks

Benchmark created by Jonathan Kingston on

Description

Further checking into the performance of JS arrays - I am iterating each variable first just in case modern browsers optimise differently nested arrays.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

window.arrayCheck1 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
    
    window.arrayCheck2 = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
    
    window.arrayCheck3 = ['dasdadas', 'asdasdasd', 'asdwesad', 'vesdvsd', 'sdfsadfsdf', 'sdfsdfsdf', 'sdfsdfe'];
    
    
    window.arrayCheck4 = [];
    for (var i = 0; i < 100; i++) {
      window.arrayCheck4.push(Math.floor(Math.random() * 100));
    }
    
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    window.arrayCheck5 = [];
    for (var i = 0; i < 100; i++) {
      window.arrayCheck5.push(String.fromCharCode(getRandomInt(97, 122)));
    }

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery iterate
var myArray;
for (var e = 1; e <= 5; e++) {
  myArray = window['arrayCheck' + e];

  $.each(myArray, function (a) {
    console.log(a);
  });
}
ready
For loop iterate
var length;
var myArray;
for (var e = 1; e <= 5; e++) {
  myArray = window['arrayCheck' + e];
  length = myArray.length;

  for (var i = 0; i < length; i++) { 
    console.log(myArray[i]);
  }
}
ready
ForEach loop iterate
var myArray;
for (var e = 1; e <= 5; e++) {
  myArray = window['arrayCheck' + e];

  myArray.forEach(function (a) { 
    console.log(a);
  });
}
ready
While loop iterate
var myArray;
var length;
var i;
for (var e = 1; e <= 5; e++) {
  myArray = window['arrayCheck' + e];

  length = myArray.length;
  i = 0;
  while (i < length) {
    console.log(myArray[i]);
    i++;
  }
}
ready
Reverse while
var myArray;
var length;
var i;
for (var e = 1; e <= 5; e++) {
  myArray = window['arrayCheck' + e];

  length = myArray.length;
  i = 0;
  while (i <= length) {
    console.log(myArray[length]);
    length--;
  }
}
ready
For loop without length cache
var myArray;
for (var e = 1; e <= 5; e++) {
  myArray = window['arrayCheck' + e];

  for (var i = 0; i < myArray.length; i++) { 
    console.log(myArray[i]);
  }
}
ready

Revisions

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

  • Revision 1: published by Jonathan Kingston on