Démonstration et comparaison des trois méthodes pour parcourir le contenu d'un tableau. Nous allons calculer le temps d'exécution de for(), for in et forEach.
for ()
Une boucle simple qui incrémente un indice et accède aux éléments successifs par cet indice.
var x = ["un", "deux", "trois" ];
for(var i= 0; i < x.length; i++)
{
document.write(x[i]);
}C'est la méthode la plus rapide.
for in
Une boucle for in est l'équivalent du foreach de PHP et autres langages, elle assigne les indices du tableau à une variable permettant accéder à la valeur correspondant.
for(let i of x) {
document.write(x[i]);
}Cette méthode est la moins performante.
for of
for (let i of x) {
document.write(i);
}Enumère directement les valeurs du tableau et non les indices.
La méthode forEach
Elle a été ajoutée à la version 1.6 de JavaScript et est supportée par Firefox et Chrome puis par Internet Explorer 9.
x.forEach(function(y) {
document.write(y);
}
);On peut associer la méthode directement à un tableau litéral:
["un", "deux", "trois"].forEach(function(y) { document.write(y); }); Si l'on aime le code compact, cela convient bien, mais c'est moins performant que la boucle for simple.
D'autres méthodes sont encore possibles mais peu lisibles.
Comparons les temps d'exécution...
Pour comparer les performances, on réalise une boucle avec chacune des méthodes. Le temps de départ est obtenu par ces instructions:
var newdate = new Date();
var fordiff = newdate.getTime();Ce temps est pris au départ et à la fin de l'exécution. La différence en millisecondes est ce qui est affiché.
Le test comparatif donne cet ordre de rapidité d'exécution sur tous navigateurs:
- for()
- forEach
- for of
- for in
Les valeurs absolues dépendent du matériel, seules comptent les valeurs relatives. Elle sont dans les mêmes proportions avec tous les navigateurs.
En voici la démonstration en ligne...
for()
var x = ["un", "deux", "trois" ];
for(var i= 0; i < x.length; i++) {
document.write(x[i]);
}for in
for(var i in x) {
document.write(x[i]);
}for of
for(let i of x) {
document.write(i);
}Méthode forEach
Elle a été ajoutée dans JavaScript 1.6.
x.forEach(function(y) {
document.write(y);
}
);
Avec un litéral:
["un", "deux", "trois"].forEach(function(y) { document.write(y); }); Les temps d'exécution...
Code source complet:
var fortime = 0;
var forintime = 0;
var foroftime = 0;
var foreachtime = 0;
/* creation d'un tableau */
var x = new Array();
for(var i = 0; i < 100000; i++) {
x[i] = "12345";
}
function mainloop() {
var newdate = new Date();
var fordiff = newdate.getTime();
for(var j = 0; j < 10; j++) {
for(var i= 0; i < x.length; i++) {
var z = x[i];
}
}
newdate = new Date();
fortime = fortime + (newdate.getTime() - fordiff);
newdate = new Date();
var forindiff = newdate.getTime();
for(var j = 0; j < 10; j++) {
for(var i in x) {
var z = i;
}
}
newdate = new Date();
forintime = forintime + (newdate.getTime() - forindiff);
newdate = new Date();
var foriofiff = newdate.getTime();
for(var j = 0; j < 10; j++) {
for(let i of x) {
var z = i;
}
}
newdate = new Date();
foofntime = foofntime + (newdate.getTime() - foofndiff)
newdate = new Date();
var foreachdiff = newdate.getTime();
for(var j = 0; j < 10; j++) {
x.forEach(function(y) {
var z = y;
});
}
newdate = new Date();
foreachtime = foreachtime + (newdate.getTime() - foreachdiff);
}
mainloop(); Nouveau benchmarks pour JavaScript: For, For In, ForEach, JQuery.each
ImmortalPC
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Ma page HTML</title>
</head>
<body>
<script type="text/javascript">
var fortime = 0;
var forintime = 0;
var foreachtime = 0;
var eachJQuery = 0;
var x = null;
function mainloop()
{
fortime = 0;
forintime = 0;
foreachtime = 0;
eachJQuery = 0;
// Test sur le FOR
if( x.length ){
var newdate = new Date();
var fordiff = newdate.getTime();
for(var j = 0; j < 10; j++)
{
for(var i= 0; i < x.length; i++)
{
var z = x[i];
}
}
newdate = new Date();
fortime = fortime + (newdate.getTime() - fordiff);
}else{
fortime = 'fail';
}
// Test sur le FOR IN
newdate = new Date();
var forindiff = newdate.getTime();
for(var j = 0; j < 10; j++)
{
for(var i in x)
{
var z = i;
}
}
newdate = new Date();
forintime = forintime + (newdate.getTime() - forindiff);
// Test sur le FOREACH
if( x.forEach ){
newdate = new Date();
var foreachdiff = newdate.getTime();
for(var j = 0; j < 10; j++)
{
x.forEach(function(y)
{
var z = y;
});
}
newdate = new Date();
foreachtime = foreachtime + (newdate.getTime() - foreachdiff);
}else{
foreachtime = 'fail';
}
// Test sur le EACH de JQuery
newdate = new Date();
var eachJQuerydiff = newdate.getTime();
for(var j = 0; j < 10; j++)
{
$.each(x, function(index, value) {
var z = value;
});
}
newdate = new Date();
eachJQuery = eachJQuery + (newdate.getTime() - eachJQuerydiff);
}
// Version Array
x = new Array();
for(var i = 0; i < 100000; i++)
{
x[i] = "12345";
}
mainloop();
document.body.innerHTML =
'<b>Version Array</b><br />'
+'for: '+fortime+'<br />'
+'for in: '+forintime+'<br />'
+'foreach: '+foreachtime+'<br />'
+'each JQuery: '+eachJQuery+'<br /><br />';
// Version Objet
x = new Object();
for(var i = 0; i < 100000; i++)
{
x['prop'+i] = "12345";
}
mainloop();
document.body.innerHTML +=
'<b>Version Object</b><br />'
+'for: '+fortime+'<br />'
+'for in: '+forintime+'<br />'
+'foreach: '+foreachtime+'<br />'
+'each JQuery: '+eachJQuery+'<br />';
</script>
</body>
</html>webmaster