Array.join() v.s. concaténation

© Christian PAULUS. Document créé le 4 février 2009 , mis à jour le 4 février 2009.

Ce n'est pas pour me vanter, mais il fait rudement chaud. Eugène Labiche

Accueil du site > Astuces > Javascript > Array.join() v.s. concaténation

Javascript / Windows

Dans la série test d’optimisation javascript, entre array.join() et la concaténation, on peut parfois hésiter. Vraiment ?

En lisant cet article sur Usuable Type, l’idée d’utiliser array.join() au lieu de la concaténation traditionnelle (texte + texte) sous javascript semble séduisante.

Petits tests rapide :

  • construire deux tableaux de tailles différentes
  • concaténer sur le plus petit, puis utiliser array.join()
  • idem avec le tableau plus grand
  • boucler 1000 fois sur chaque test et compter le temps qui passe (en ms).

Code de test :

<script type="text/javascript">
<!--

var ii, delai = 10000, text = '';
/*
* petit tableau
*/
var s_array = new Array("Annie","Estelle","Francine","Carole");

var l_array = new Array();
/*
* gros tableau
*/
for (ii = 0; ii < 100; ii++) {
        l_array[ii] = "Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à "
         + "côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce "
         + "qui lui permet de penser à la cœnogenèse de l'être dont il est question "
         + "dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, "
         + "pense-t-il, diminue çà et là la qualité de son œuvre";
}

/* test #1, concatenation */
var n0 = new Date();
for (ii = 0; ii < delai; ii++) {
        text = 'There are ' + s_array.length + ' members in the elements array s_array.';
}
var n1 = new Date();
var res = n1 - n0;
document.write('test #1 (concatenation) end @ ' + res + ' ms : ' + text + '<br/>');

/* test #2, array.join() */
var n0 = new Date();
for (ii = 0; ii < delai; ii++) {
        text = ['There are', s_array.length, 'members in the elements array s_array.'].join(' ');
}
var n1 = new Date();
var res = n1 - n0;
document.write('test #2 (array.join()) end @ ' + res + ' ms : ' + text + '<br/>');

/* test #3, concatenation */
var n0 = new Date();
for (ii = 0; ii < delai; ii++) {
        text = 'There are ' + l_array.length + ' members in the elements array l_array.';
}
var n1 = new Date();
var res = n1 - n0;
document.write('test #3 (concatenation) end @ ' + res + ' ms : ' + text + '<br/>');

/* test #4, array.join() */
var n0 = new Date();
for (ii = 0; ii < delai; ii++) {
        text = ['There are', l_array.length, 'members in the elements array l_array.'].join(' ');
}
var n1 = new Date();
var res = n1 - n0;
document.write('test #4 (array.join()) end @ ' + res + ' ms : ' + text + '<br/>');

/*
* Placer *.length dans une var pour optimiser ?
*/

/* test #5, concatenation */
var len = l_array.length;
var n0 = new Date();
for (ii = 0; ii < delai; ii++) {
        text = 'There are ' + len + ' members in the elements array l_array.';
}
var n1 = new Date();
var res = n1 - n0;
document.write('test #5 (concatenation) end @ ' + res + ' ms : ' + text + '<br/>');

/* test #6, array.join() */
var len = l_array.length;
var n0 = new Date();
for (ii = 0; ii < delai; ii++) {
        text = ['There are', len, 'members in the elements array l_array.'].join(' ');
}
var n1 = new Date();
var res = n1 - n0;
document.write('test #6 (array.join()) end @ ' + res + ' ms : ' + text + '<br/>');

//-->
</script>

Le script du code de test :

HTML - 2.8 ko
Array.join vs concaténation

Résultats IE7/Windows :

test #1 (concatenation) end @ 44 ms : There are 4 members in the elements array s_array.
test #2 (array.join()) end @ 96 ms : There are 4 members in the elements array s_array.
test #3 (concatenation) end @ 39 ms : There are 100 members in the elements array l_array.
test #4 (array.join()) end @ 79 ms : There are 100 members in the elements array l_array.
test #5 (concatenation) end @ 29 ms : There are 100 members in the elements array l_array.
test #6 (array.join()) end @ 74 ms : There are 100 members in the elements array l_array.

Résultats FFX3/Windows :

test #1 (concatenation) end @ 11 ms : There are 4 members in the elements array s_array.
test #2 (array.join()) end @ 50 ms : There are 4 members in the elements array s_array.
test #3 (concatenation) end @ 8 ms : There are 100 members in the elements array l_array.
test #4 (array.join()) end @ 38 ms : There are 100 members in the elements array l_array.
test #5 (concatenation) end @ 12 ms : There are 100 members in the elements array l_array.
test #6 (array.join()) end @ 41 ms : There are 100 members in the elements array l_array.

Résultats Opéra9/Windows :

test #1 (concatenation) end @ 13 ms : There are 4 members in the elements array s_array.
test #2 (array.join()) end @ 42 ms : There are 4 members in the elements array s_array.
test #3 (concatenation) end @ 14 ms : There are 100 members in the elements array l_array.
test #4 (array.join()) end @ 55 ms : There are 100 members in the elements array l_array.
test #5 (concatenation) end @ 16 ms : There are 100 members in the elements array l_array.
test #6 (array.join()) end @ 37 ms : There are 100 members in the elements array l_array.

Conclusion : concaténation plus rapide. Ceci dit, à l’époque de la rédaction de l’article, ce n’était peut-être pas le cas ?

Plussoyez !

Les forums sont fermés.