Pour-chaque-dessus d'un tableau en JavaScript?

Question

J'ai un tableau d'un nombre variable d'objets. À un certain point, je veux faire quelque chose pour tous les objets dans ce tableau.

Comment puis-je le faire avec du JavaScript?

J'ai pensé à quelque chose comme ceci: forEach(instance in objects) (où les objets est mon tableau d'objets), mais cela ne semble pas être correcte pour le JavaScript?

Answer 1

Le standard moyen pour parcourir un tableau en JavaScript est un de vanille for-boucle:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element i.
}

Notez, cependant, que cette approche est que si vous avez un tableau dense, et chaque indice est occupée par un élément. Si le tableau est incomplet, vous pouvez rencontrer des problèmes de performances avec cette approche, car vous devrez effectuer une itération sur un lot d'indices qui ne sont pas vraiment exister dans le tableau. Dans ce cas, un for .. in-boucle pourrait être une meilleure idée. Cependant, vous devez utiliser les mesures de protection appropriées afin de garantir que seules les propriétés de la matrice (qui est, les éléments du tableau) sont suivies, depuis l' for..in-boucle sera également énumérés dans les anciens navigateurs, ou si les autres propriétés sont définies comme enumerable.

Dans ECMAScript 5 , il y aura un forEach méthode sur le tableau de prototype, mais il n'est pas pris en charge dans les navigateurs. Donc, pour être en mesure de l'utiliser de manière cohérente, vous devez disposer d'un environnement qui prend en charge (par exemple, Node.js pour le côté serveur JavaScript), ou d'utiliser un "Polyfill". Le Polyfill pour que cette fonctionnalité est, cependant, trivial et depuis elle rend le code plus facile à lire, c'est une bonne polyfill à inclure.

Answer 2

Si vous utilisez jQuery, la bibliothèque, vous pouvez utiliser jQuery.each:

$.each(yourArray, function(index, value) {
  // do your stuff here
});

EDIT : Comme par question, l'utilisateur veut code en javascript au lieu de jquery afin de la modifier est

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

Answer 3

Boucle arrière

Je pense que l'inverse for boucle mérite une mention:

for (var i=array.length; i--; ) {
     // process array[i]
}

Avantages:

• Vous n'avez pas besoin de déclarer un temporaire len variable, ou à comparer array.length sur chaque itération, soit de ce qui pourrait être une minute d'optimisation.
• Retrait des frères et sœurs du DOM dans l'ordre inverse est généralement plus efficace. (Le navigateur doit faire moins de déplacement des éléments dans son intérieur des tableaux).
• Si vous modifiez la matrice tout en boucle, pendant ou après l'indice i (par exemple, vous retirer ou d'insérer un élément à l' array[i]), une boucle avant serait ignorer l'élément déplacé à gauche dans la position i, ou re-processus de l' ie point qui a été décalé à droite. Dans de telles situations, vous pourriez mettre à jour i pour pointer vers l'élément "suivant" qui a besoin de traitement, mais il suffit d'inverser le sens de l'itération est souvent une solution plus élégante.
• Il est plus court à taper que de nombreuses autres options disponibles. (Même si elle perd forEach() et à ES6 l' for ... of.)

Inconvénients:

• Il traite les éléments dans l'ordre inverse. Si vous avez été la construction d'un nouveau tableau à partir des résultats, ou l'impression des choses sur l'écran, naturellement, le résultat sera inversé par rapport à la commande initiale.
• À plusieurs reprises l'insertion des frères et sœurs dans le DOM comme un premier enfant à garder leur ordre n'est pas plus efficace. (Le navigateur ne reste plus qu'à décaler les choses.) Pour créer les nœuds DOM de manière efficace et dans l'ordre, il suffit de la boucle vers l'avant et ajouter que la normale (et également utiliser un "fragment de document").
• La boucle de retournement confond les développeurs juniors. (Vous pouvez considérer qu'un avantage, selon votre perspective.)

Je sais que certains développeurs utilisent l'inverse for boucle par défaut, sauf s'il y a une bonne raison pour faire une boucle sur l'avant.

Bien que les gains de performance sont probablement insignifiant, et il lui crie "Viens de le faire pour chaque élément de la liste, je ne se soucient pas de l'ordre!". (Bien qu'il est impossible de distinguer les occasions quand vous ne se soucient de la commande, et vraiment ne voulez boucle dans le sens inverse.)

---

Comment ça fonctionne?

Vous remarquerez qu' i-- est le milieu de la clause, et la dernière clause (où vous êtes habitués à voir i++) est vide. Cela signifie qu' i-- est également utilisé en tant que condition pour la suite. Elle est exécutée et vérifié avant chaque itération.

• Comment peut-il commencer à array.length sans exploser?

  Parce qu' i-- s'exécute avant chaque itération, à la première itération que nous allons accéder à l'élément à l' array.length-1 qui évite tous les problèmes avec la baie de sortir des limites d' undefined articles.

• Pourquoi ne pas arrêter l'itération avant l'index 0?

  La boucle va s'arrêter l'itération lorsque la condition i-- donne un falsey valeur (quand il rendements 0).

  Le truc, c'est que contrairement à --i, le trailing i-- opérateur décrémente i , mais les rendements de la valeur avant de la décrémenter. Votre console peut démontrer ceci:

  > var i = 5; [i, i--, i];

  [5, 5, 4]

  Ainsi, sur la dernière itération, i a été précédemment 1 et de la i-- des modifications de l'expression à 0 mais en réalité, les rendements en 1 (truthy), et donc la condition de passe. Sur la prochaine itération i-- jeux i de -1 , mais les rendements en 0 (falsey), provoquant la boucle à la fin immédiatement.

  Dans le traditionnel en avant pour la boucle, i++ et ++i sont interchangeables (comme Douglas Crockford points). Cependant dans le sens inverse pour la boucle, parce que notre decrementor est aussi notre condition d'expression, nous devons nous en tenir avec i-- si nous voulons traiter l'élément à l'indice 0.

---

Trivia

Certaines personnes aiment dessiner une petite flèche dans le sens inverse for boucle, et à la fin avec un clin d'oeil:

for (var i=array.length; i-->0 ;) {

Crédit à WYL pour enfin me convertir.

Answer 4

Certains C-style de langues, foreach à boucle à travers des énumérations. En JavaScript c'est fait avec l' for..in structure de boucle:

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Il y a un hic. for..in boucle à travers chaque objet énumérable membres, et les membres de son prototype. Pour éviter de lire les valeurs qui sont héritées par le prototype de l'objet, il suffit de vérifier si la propriété appartient à l'objet:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

En outre, ECMAScript 5 a ajouté une forEach méthode de Array.prototype qui peut être utilisée pour énumérer les sur un tableau à l'aide d'un calback (le polyfill est dans les docs de sorte que vous pouvez toujours l'utiliser pour les anciens navigateurs):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Il est important de noter que l' Array.prototype.forEach ne se casse pas lors de la callback retourne false. jQuery et Underscore.js fournir leurs propres variations sur each de fournir des boucles qui peuvent être court-circuitées.