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

On n'est jamais heureux que dans le bonheur qu'on donne. Donner, c'est recevoir. Abbé Pierre

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

Javascript / Windows

Javascript

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 :


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 ?