Quel est le meilleur moyen pour faire une boucle par un ensemble d'éléments en JavaScript?

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

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

J'ai entendu dire que l'utilisation du "reverse boucle" while est plus rapide mais je n'ai pas de réel moyen de confirmer cela:

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

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

Ce qui est considéré comme la meilleure pratique quand il s'agit de bouclage bien que des éléments en JavaScript, ou n'importe quel tableau pour que la matière?

  • Ce serait formidable si vous marquez une des réponses comme une réponse. C'est après tout l'un des principaux points de la SORTE 🙂
  • Il serait également très bien si vous re-cueillis accepté de répondre maintenant que l'on a accepté l'un est sans valeur >:) . . . là encore, c'est vraiment vieux, donc je ne m'en soucie pas vraiment.
InformationsquelleAutor James | 2008-10-01
  1. 56

    Voici un joli sous forme d'une boucle j'utilise souvent. Vous créez les itérées de la variable dans l'instruction for et vous n'avez pas besoin de vérifier la longueur de la propriété, qui peut être coûteux, spécialement lors d'une itération à travers une NodeList. Cependant, vous devez être prudent, vous ne pouvez pas l'utiliser si l'une des valeurs dans le tableau pourrait être "falsy". Dans la pratique, je ne l'utilise que lors de l'itération sur un tableau d'objets qui ne contiennent pas de valeurs null (comme une NodeList). Mais j'aime 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++) {
  //Look no need to do list[i] in the body of the loop
  console.log("Looping: index ", i, "item" + item);
}

    Notez que cela peut également être utilisé pour la boucle vers l'arrière (en tant que votre liste n'a pas un ['-1'] propriété)

    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("Looping: index ", i, "item", item);
}

    ES6 mise à Jour

    pour...de vous donne le nom mais pas l'indice, qui est disponible depuis ES6 

    for (let item of list) {
    console.log("Looping: index ", "Sorry!!!", "item" + item);
}
    • J'aime tellement cette. Au premier abord je me demandais comment la boucle serait jamais sortie, puis je me suis souvenu que le "milieu" de la déclaration est fondamentalement un moment de la sortie lorsqu'il est évalué à false. L'affectation d'une variable d'index de tableau qui n'existe pas == false! Très intelligent.
    • Juste pour être précis à 100%, lorsque l'élément n'existe pas, il retourne undefined qui est falsy.
    • Upvote pour une précision de 100%;)
    • Flute, de ne pas le voir celui-là! Désolé pour la dupe!
    InformationsquelleAutor Juan Mendes
  2. 26

    Noter que dans certains cas, vous besoin en boucle dans l'ordre inverse (mais vous pouvez utiliser i-- trop).

    Par exemple quelqu'un veut utiliser la nouvelle getElementsByClassName fonction de boucle sur les éléments d'une catégorie donnée et de modifier cette classe. Il a trouvé qu'un seul des deux éléments a été modifié (dans FF3).

    C'est parce que la fonction retourne un live NodeList, ce qui reflète les changements dans l'arborescence Dom. La marche de la liste dans l'ordre inverse d'éviter ce problème.

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

    Dans l'augmentation de l'indice de progression, quand nous demandons à l'indice 1, FF inspecte les Dom et saute le premier élément avec style2, qui est le 2ème de l'original Dom, donc il renvoie le 3ème élément initial!

    • Un bon point, même si je ne le conseille pas à changer le nom de la classe à la volée, comme il force le navigateur à recalculer le rendu de l'ensemble du document ...
    • Vous pourriez théoriquement copier l'intégralité d'un document de la mémoire, changer tout ce que vous voulez, et de remplacer l'ensemble de document avec la nouvelle, le document modifié. mais cela dépend de la situation.
    InformationsquelleAutor PhiLho
  3. 9

    Que j'aime faire:

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

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

    • Un rapide test (directement dans mon éditeurs de navigateur) montre qu'un millier d'itérations n'est pas possible de dire l'heure avec votre régime, dit de 15 ms, avec l'analyse initiale de la longueur pour chaque itération, c'est 31 ms ...
    • Gestion des ressources humaines, un peu rapide: à l'Aide d'un test sur le tableau de longueur, il dit 0 ms ...
    • Assurez-vous de ne pas commencer à utiliser ce sur les tableaux où null,undefined,false,0,"" sont des éléments valides!
    InformationsquelleAutor
  4. 7

    Au risque de me faire hurler dessus, je voudrais obtenir un helper javascript bibliothèque comme jquery ou prototype ils encapsulent la logique à nice méthodes - les deux ont un .chaque méthode/itérateur pour le faire - et ils s'efforcent de le rendre compatible avec tous les navigateurs

    EDIT: Cette réponse a été publiée en 2008. Aujourd'hui beaucoup mieux constructions existent. Ce cas particulier pourrait être résolu avec un .forEach.

    • Évidemment, je l'ai utiliser la bibliothèques javaScript pour beaucoup de projets, ils sont à gagner du temps et ne pas me causer comme beaucoup des maux de tête, mais avec quelques petits projets, je trouve que c'est mieux d'écrire mes propres méthodes. jQuery est certainement mon préféré mais en raison de sa fantastique simplicité!
    • Pourquoi employer une bibliothèque pour effectuer une tâche simple ?-)
    • Je sais, je sais. J'aime tout simplement, y compris jquery afin de minimiser le risque d'introduction d'un cross-browser imcompatibility question. Vous n'avez pas besoin de beaucoup de code dans votre "doSomething' à posibly introduire l'une de ces erreurs.
    • Honnêtement, jQuery pour traiter avec des boucles? De la folie.
    • En réalité, je pense qu'il y a très peu de sites je voudrais créer à l'aide de javascript, d'où l'ajout de jquery serait de la folie? Quelles sont les complications de l'utilisation de jquery, comparativement ne pas le faire?
    • Désolé, j'étais peut-être un peu dur. En bref, à l'aide de jQuery signifie que le navigateur de l'utilisateur doit télécharger 50K de JavaScript, qui peut apporter une importante dégradation des performances (sur un appareil mobile, par exemple). Pour ce prix, jQuery (ou une bibliothèque) devrait offrir des avantages importants pour l'utilisateur. Je ne pense pas que fournir une fonction d'itérateur est admissible, en particulier lorsqu'il n'y a pas d'incompatibilités entre navigateurs avec des boucles à être travaillé.
    • Vous avez raison à propos de la performance succès - en particulier concernant les appareils tels que mobile 🙂 je suppose que cela dépend beaucoup sur le public cible et de la taille du site en général. Je suis totalement d'accord que l'ajout de jquery serait de la folie si vous êtes à la création d'un "simple" site web. Je suis juste la couleur de mon monde (petites annonces/journaux/sites web d'administration). Dépend du contexte, bien sûr...
    • Pas besoin d'inclure une lib pour cela, Array.forEach est intégré et il est facile à mettre en œuvre pour les navigateurs qui ne prennent pas en charge, developer.mozilla.org/en/JavaScript/Reference/Global_Objects/.... Méfiez-vous que l'utilisation de fonctions comme Array.each, jQuery.forEach à boucle si vous êtes dans une boucle serrée, sera un gain de performance. Cependant, il est très pratique et la différence n'est pas perceptible dans les boucles avec moins d'itérations.
    • Cette question peut avoir été OK quand elle a été écrite. C'est à peu près aujourd'hui obsolète depuis la plupart des navigateurs (IE9+) support Tableau.le prototype.forEach
    • J'ai horreur du débogage d'un forEach boucle. Dans l'étape, pas à pas sortant. C'est tellement plus facile de déboguer un for boucle;

    InformationsquelleAutor Per Hornshøj-Schierbeck
  5. 6

    Je pense à l'aide de la première forme est probablement la voie à suivre, car il est probablement de loin la plus commune de la boucle de la structure de l'univers connu, et depuis je ne crois pas l'inverse boucle vous permet d'économiser tout le temps dans la réalité (encore en train de faire une incrémentation/décrémentation et une comparaison à chaque itération).

    Code qui est reconnaissable et lisible pour les autres est certainement une bonne chose.

    InformationsquelleAutor Adam Bellaire
  6. 6

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

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

    Mon problème est que j'ai prévu que des éléments serait un tableau, mais il n'est pas. La nodelist Document.getElementsByTagName() renvoie la est itératif, mais vous ne pouvez pas appeler tableau.prototype des méthodes sur elle.

    Vous peut cependant remplir un tableau avec nodelist éléments comme ceci:

    var myElements = [];
for (var i=0; i<myNodeList.length; i++) {                               
    var element = myNodeList[i];
    myElements.push(element);
};

    Après que vous pouvez vous sentir libre de l'appeler .innerHTML ou .style ou quelque chose sur les éléments de votre tableau.

    InformationsquelleAutor Chris Impicciche
  7. 4

    Moi aussi, je vous conseille d'utiliser la méthode simple (BAISER !-)

    - mais certains d'optimisation pourrait être trouvée, à savoir de ne pas tester 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]);
}
    • Une belle amélioration en fait... va Certainement l'utilise sur toutes mes boucles "for" à partir de maintenant! merci!!!!
    • À moins que ce qui se passe à l'intérieur de doSomething() peut modifier le nombre total d'éléments dans le tableau.
    • Ray: Alors ce n'est pas une boucle for, vous devez utiliser ...
    InformationsquelleAutor roenving
  8. 4

    Voir aussi mon commentaire sur Andrew Couvertures de test ...

    J'ai juste essayé d'exécuter un test pour comparer une simple itération, à l'optimisation, j'ai présenté, et l'inverse n'/alors que, lorsque les éléments dans un tableau a été testé dans chaque boucle.

    Et hélas, pas de surprise, les trois navigateurs que j'ai testé avait des résultats très différents, bien que l'optimisation de la simple itération a été le plus rapide dans tous !-)

    Test:

    Un tableau avec 500 000 éléments de construire à l'extérieur, le vrai test, pour chaque itération, la valeur de la matrice spécifique est l'élément révélé.

    Test 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.

    Inverse do-while: 3375,1328,1516,1344,1375,1406,1688,1344,1297,1265

    Moyenne: 1593.80 mme. (Remarque particulièrement délicat résultat)

    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

    Inverse 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.

    Inverse do-while: 414,381,389,383,388,389,381,387,400,379

    Moyenne: 389.10 ms.

    InformationsquelleAutor roenving
  9. 3

    Forme de boucle fournie par Juan Mendez est très utile et pratique,
    Je l'ai changé un peu, de sorte que maintenant, il collabore avec le faux, nul, zéro, et les cordes à vide trop.

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

for(var i = 0, item; (item = items[i]) !== undefined; i++)
{
    console.log("Index: " + i + "; Value: " + item);
}
    InformationsquelleAutor Tornike Comaia
  10. 1

    Je sais que vous ne voulez pas entendre cela, mais: je considère que la meilleure pratique est la plus lisible dans ce cas. Tant que la boucle n'est pas de comptage d'ici à la lune, le rendement, le gain ne sera pas uhge assez.

    • D'accord. Si vous êtes un comptage à rebours, d'écrire un commentaire qui dit: "ce simplement une question de vitesse", alors toute personne qui souhaite modifier votre code ne sera pas confus par elle.
    InformationsquelleAutor Georgi
  11. 0

    Je préfère la boucle for que c'est plus lisible. Boucle à partir d'une longueur de 0 serait plus efficace que la boucle de 0 à longueur. Et l'utilisation de l'inversion de la boucle while est plus efficace qu'un foor boucle comme vous l'avez dit. Je n'ai pas le lien vers la page avec les résultats de la comparaison de plus, mais je me souviens que la différence variées sur différents navigateurs. Pour certains navigateur l'inverse en boucle a été deux fois plus rapide. Cependant, il ne fait aucune différence si vous êtes à la boucle des "petits" des tableaux. Dans votre exemple de cas où la longueur des éléments de "petits"

    • Pourquoi n'en boucle à partir d'une longueur de 0 serait plus efficace que la boucle de 0 à longueur ?
    InformationsquelleAutor Gene
  12. 0

    Je pense que vous avez deux solutions. Pour les dom-éléments tels que jQuery et comme cadres de vous donner une bonne méthode d'itération. La deuxième approche est la boucle for.

    InformationsquelleAutor David Robbins
  13. 0

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

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

    Alors il peut être utilisé comme n'importe quel standard de tableau.

    • Que j'ai besoin de mon ami!
    InformationsquelleAutor Dustin Halstead
  14. -1

    J'aime utiliser un TreeWalker si l'ensemble des éléments sont les enfants d'un nœud racine.

    InformationsquelleAutor GijsjanB