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

Voici une belle forme d'une boucle que j'utilise souvent. Vous créez la variable itérée à partir de l'instruction for et vous n'avez pas besoin de vérifier la propriété length, ce qui peut être coûteux surtout lors de l'itération à travers un NodeList. Cependant, vous devez faire attention, vous ne pouvez pas l'utiliser si l'une des valeurs du tableau pourrait être "fausse". En pratique, je ne l'utilise que lorsque je parcours un tableau d'objets qui ne contient pas de valeurs nulles (comme un NodeList). Mais j'adore son sucre syntaxique.

var list = [{a:1,b:2}, {a:3,b:5}, {a:8,b:2}, {a:4,b:1}, {a:0,b:8}];

for (var i=0, item; item = list[i]; i++) {
  // Regardez, pas besoin de faire list[i] dans le corps de la boucle
  console.log("Boucle: index ", i, "élément" + item);
}

Notez que cela peut également être utilisé pour boucler en arrière.

var list = [{a:1,b:2}, {a:3,b:5}, {a:8,b:2}, {a:4,b:1}, {a:0,b:8}];

for (var i = list.length - 1, item; item = list[i]; i--) {
  console.log("Boucle: index ", i, "élément", item);
}

Mise à jour ES6

for...of peut être utilisé pour une syntaxe plus propre. Disponible depuis ES6

const a = ["a", "b", "c"];

for (const [index, element] of a.entries()) {
  console.log({index, element});
}

// Si vous n'avez pas besoin de l'index
for (const element of a) {
  console.log({element});
}

Answer 2

Notez que dans certains cas, vous avez besoin de boucler dans l'ordre inverse (mais vous pouvez aussi utiliser i--).

Par exemple, quelqu'un voulait utiliser la nouvelle fonction getElementsByClassName pour boucler sur les éléments d'une classe donnée et modifier cette classe. Il a constaté que seul un élément sur deux était modifié (dans FF3).
Cela est dû au fait que la fonction renvoie une NodeList en direct, qui reflète donc les changements dans l'arbre Dom. Le fait de parcourir la liste dans l'ordre inverse a permis d'éviter ce problème.

var menus = document.getElementsByClassName("style2");
for (var i = menus.length - 1; i >= 0; i--)
{
  menus[i].className = "style1";
}

En progression d'index croissante, lorsque nous demandons l'index 1, FF inspecte le Dom et saute le premier élément avec style2, qui est le 2ème de l'original Dom, ce qui renvoie donc le 3ème élément initial !

Answer 3

J'aime faire:

 `var menu = document.getElementsByTagName('div');
for (var i = 0; menu[i]; i++) {
     ...
}` 

Il n'y a pas d'appel à la longueur du tableau à chaque itération.

Answer 4

À risquer de se faire crier dessus, je prendrais une bibliothèque d'aide JavaScript comme jquery ou prototype elles encapsulent la logique dans de belles méthodes - les deux ont une méthode/itérateur .each pour le faire - et ils s'efforcent tous les deux de le rendre compatible avec tous les navigateurs

ÉDITER: Cette réponse a été postée en 2008. Aujourd'hui, de bien meilleures structures existent. Ce cas particulier pourrait être résolu avec un .forEach.

Answer 5

Je pense que l'utilisation du premier formulaire est probablement la voie à suivre, car il s'agit probablement de la structure de boucle la plus courante dans l'univers connu, et comme je ne crois pas que la boucle inversée vous fasse gagner du temps en réalité (fait toujours une incrémentation/décrémentation et une comparaison à chaque itération).

Un code reconnaissable et lisible par les autres est certainement une bonne chose.