Quel est le meilleur moyen de parcourir un ensemble d'éléments en JavaScript ?

Question

Dans le passé et avec la plupart de mes projets actuels, j'ai tendance à utiliser une boucle for comme ceci :

var elements = document.getElementsByTagName('div');
for (var i=0; i

`

J'ai entendu dire qu'utiliser une boucle "reverse while" est plus rapide mais je n'ai pas de moyen réel de le confirmer :

var elements = document.getElementsByTagName('div'), 
    length = elements.length;

while(length--) {
    doSomething(elements[length]);
}

Quelle est la meilleure pratique en matière de bouclage à travers les éléments en JavaScript, ou n'importe quel tableau d'ailleurs ?

`

Answer 1

Je conseille également d'utiliser la méthode simple (KISS !-)

-- mais quelques optimisations pourraient être trouvées, notamment ne pas vérifier la longueur d'un tableau plus d'une fois :

var elements = document.getElementsByTagName('div');
for (var i=0, im=elements.length; im>i; i++) {
    doSomething(elements[i]);
}

Answer 2

J'ai eu un problème très similaire plus tôt avec document.getElementsByClassName(). Je ne savais pas ce qu'était un nodelist à l'époque.

var elements = document.getElementsByTagName('div');
for (var i=0; i

``

Mon problème était que je m'attendais à ce que les éléments soient un tableau, mais ce n'est pas le cas. Le nodelist Document.getElementsByTagName() est itérable, mais vous ne pouvez pas appeler des méthodes array.prototype dessus.

Cependant, vous pouvez remplir un tableau avec des éléments de nodelist de cette manière :

var myElements = [];
for (var i=0; i

`

Après cela, vous pouvez librement appeler .innerHTML ou .style ou quelque chose sur les éléments de votre tableau.

` ``

Answer 3

Consultez également mon commentaire sur le test d'Andrew Hedges...

J'ai essayé d'exécuter un test pour comparer une simple itération, l'optimisation que j'ai introduite et le reverse do/while, où les éléments dans un tableau étaient testés à chaque boucle.

Et hélas, sans surprise, les trois navigateurs que j'ai testés ont donné des résultats très différents, même si l'itération simple optimisée était la plus rapide dans tous les cas !-)

Test :

Un tableau avec 500 000 éléments créé en dehors du véritable test, à chaque itération la valeur de l'élément spécifique du tableau est révélée.

Test effectué 10 fois.

IE6 :

Résultats :

Simple : 984,922,937,984,891,907,906,891,906,906

Moyenne : 923,40 ms.

Optimisé : 766,766,844,797,750,750,765,765,766,766

Moyenne : 773,50 ms.

Reverse do/while : 3375,1328,1516,1344,1375,1406,1688,1344,1297,1265

Moyenne : 1593,80 ms. (Notez un résultat particulièrement gênant)

Opera 9.52 :

Résultats :

Simple : 344,343,344,359,343,359,344,359,359,359

Moyenne : 351,30 ms.

Optimisé : 281,297,297,297,297,281,281,297,281,281

Moyenne : 289,00 ms

Reverse do/while : 391,407,391,391,500,407,407,406,406,406

Moyenne : 411,20 ms.

FireFox 3.0.1 :

Résultats :

Simple : 278,251,259,245,243,242,259,246,247,256

Moyenne : 252,60 ms.

Optimisé : 267,222,223,226,223,230,221,231,224,230

Moyenne : 229,70 ms.

Reverse do/while : 414,381,389,383,388,389,381,387,400,379

Moyenne : 389,10 ms.

Answer 4

La forme de boucle fournie par Juan Mendez est très utile et pratique, j'ai un peu modifié pour qu'elle fonctionne maintenant avec - false, null, zéro et des chaînes vides aussi.

var items = [
    true,
    false,
    null,
    0,
    ""
];

for(var i = 0, item; (item = items[i]) !== undefined; i++)
{
    console.log("Index: " + i + "; Valeur: " + item);
}

Answer 5

Je sais que cette question est ancienne - mais voici une autre solution, extrêmement simple ...

var elements = Array.from(document.querySelectorAll("div"));

// Boucle.
elements.forEach(function(value) {
  taFonction(value);
});