JavaScript pour… en vs pour

Pensez-vous qu'il y a une grande différence entre les boucles ... et les boucles? Quel type de "pour" préférez-vous utiliser et pourquoi?

Disons que nous avons un tableau de tableaux associatifs:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

Nous pouvons donc itérer:

for (var i = 0; i < myArray.length; i++)

Et:

for (var i in myArray)

Je ne vois pas de grande différence. Y a-t-il des problèmes de performances?

Le choix doit être basé sur l'idiome le mieux compris.

Un tableau est itéré en utilisant:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

Un objet utilisé comme tableau associatif est itéré en utilisant:

for (var key in o)
  //do stuff with o[key]

Sauf si vous avez des raisons bouleversantes, respectez le modèle d'utilisation établi.

Douglas Crockford recommande dans JavaScript: The Good Parts (page 24) pour éviter d'utiliser l' for inénoncé.

Si vous utilisez for inpour parcourir les noms de propriété dans un objet, les résultats ne sont pas classés. Pire: vous pourriez obtenir des résultats inattendus; il inclut les membres hérités de la chaîne de prototypes et le nom des méthodes.

Tout sauf les propriétés peut être filtré avec .hasOwnProperty. Cet exemple de code fait ce que vous vouliez probablement à l'origine:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI - Utilisateurs jQuery

La each(callback)méthode de jQuery utilise la for( ; ; )boucle par défaut, et n'utilisera for( in ) que si la longueur est undefined.

Par conséquent, je dirais qu'il est prudent de supposer le bon ordre lors de l'utilisation de cette fonction.

Exemple :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

L'inconvénient de cette utilisation est que si vous utilisez une logique non UI, vos fonctions seront moins portables sur d'autres frameworks. La each()fonction est probablement mieux réservée pour une utilisation avec les sélecteurs jQuery et for( ; ; )pourrait être recommandée dans le cas contraire.

il existe des différences de performances selon le type de boucle que vous utilisez et le navigateur.

Par exemple:

for (var i = myArray.length-1; i >= 0; i--)

est presque deux fois plus rapide sur certains navigateurs que:

for (var i = 0; i < myArray.length; i++)

Cependant, à moins que vos tableaux soient ÉNORMES ou que vous les boucliez constamment, tous sont assez rapides. Je doute sérieusement que le bouclage de tableaux soit un goulot d'étranglement dans votre projet (ou pour tout autre projet d'ailleurs)

Notez que la méthode native Array.forEach est désormais largement prise en charge .

Réponse mise à jour pour la version actuelle 2012 de tous les principaux navigateurs - Chrome, Firefox, IE9, Safari et Opera prennent en charge le tableau natif d'ES5 pour chaque.

Sauf si vous avez une raison de prendre en charge IE8 nativement (en gardant à l'esprit que le cadre ES5-shim ou Chrome peut être fourni à ces utilisateurs, ce qui fournira un environnement JS approprié), il est plus simple d'utiliser simplement la syntaxe appropriée du langage:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

La documentation complète pour array.forEach () est à MDN.

Les deux ne sont pas identiques lorsque le tableau est clairsemé.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

Utilisation de forEach pour ignorer la chaîne de prototypes

Juste un addendum rapide à la réponse de @ nailer ci - dessus , l'utilisation de forEach avec Object.keys signifie que vous pouvez éviter d'itérer sur la chaîne de prototype sans avoir à utiliser hasOwnProperty.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

Je soutiens que vous devez choisir la méthode d'itération en fonction de vos besoins. Je vous suggère de ne pas en fait jamais une boucle par native Arrayavec la for instructure. C'est beaucoup plus lent et , comme Chase Seibert l'a souligné il y a un instant, il n'est pas compatible avec le framework Prototype.

Il existe une excellente référence sur différents styles de boucle que vous devez absolument consulter si vous travaillez avec JavaScript . Ne faites pas les premières optimisations, mais vous devriez garder ces choses quelque part à l'arrière de votre tête.

J'utiliserais for inpour obtenir toutes les propriétés d'un objet, ce qui est particulièrement utile lors du débogage de vos scripts. Par exemple, j'aime avoir cette ligne à portée de main lorsque j'explore un objet inconnu:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

Il transfère le contenu de l'objet entier (avec les corps de méthode) dans mon journal Firebug. Très pratique.

voici quelque chose que j'ai fait.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

voici comment vous l'utiliseriez,
cela fonctionnera sur les tableaux et les objets (comme une liste d'éléments HTML)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Je viens de faire cela, donc je suis ouvert aux suggestions :)

J'utiliserais les différentes méthodes en fonction de la façon dont je voulais référencer les éléments.

Utilisez foreach si vous voulez juste l'élément actuel.

Utilisez pour si vous avez besoin d'un indexeur pour effectuer des comparaisons relatives. (C'est-à-dire comment cela se compare-t-il à l'élément précédent / suivant?)

Je n'ai jamais remarqué de différence de performance. J'attendrais d'avoir un problème de performance avant de m'en inquiéter.

Avec for (var i dans myArray), vous pouvez également parcourir les objets, je contiendra le nom de la clé et vous pouvez accéder à la propriété via myArray [i] . De plus, toutes les méthodes que vous aurez ajoutées à l'objet seront également incluses dans la boucle, c'est-à-dire si vous utilisez un framework externe comme jQuery ou prototype, ou si vous ajoutez directement des méthodes aux prototypes d'objet, à un moment donné je pointerai vers ces méthodes.

Fais attention!

Si vous avez plusieurs balises de script et que vous recherchez une information dans les attributs de balise par exemple, vous devez utiliser la propriété .length avec une boucle for car ce n'est pas un simple tableau mais un objet HTMLCollection.

https://developer.mozilla.org/en/DOM/HTMLCollection

Si vous utilisez l'instruction foreach pour (var i dans yourList), elle renverra les propriétés et les méthodes de HTMLCollection dans la plupart des navigateurs!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

Même si getElementsByTagName doit retourner une NodeList, la plupart des navigateurs retournent une HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Les boucles in in Arrays ne sont pas compatibles avec Prototype. Si vous pensez que vous pourriez avoir besoin d'utiliser cette bibliothèque à l'avenir, il serait logique de s'en tenir aux boucles.

http://www.prototypejs.org/api/array

J'ai vu des problèmes avec le "pour chacun" en utilisant des objets et des prototypes et des tableaux

ma compréhension est que le pour chacun est pour les propriétés des objets et non des tableaux

Si vous voulez vraiment accélérer votre code, qu'en est-il?

for( var i=0,j=null; j=array[i++]; foo(j) );

c'est un peu d'avoir la logique while dans l'instruction for et c'est moins redondant. Firefox a également Array.forEach et Array.filter

Un code plus court et meilleur selon jsperf est

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Utilisez la boucle Array (). ForEach pour profiter du parallélisme

pour (;;) est pour les tableaux : [20,55,33]

for..in est pour les objets : {x: 20, y: 55: z: 33}

Faites attention!!! J'utilise Chrome 22.0 sous Mac OS et j'ai des problèmes avec la pour chaque syntaxe.

Je ne sais pas s'il s'agit d'un problème de navigateur, d'un problème javascript ou d'une erreur dans le code, mais c'est TRÈS étrange. En dehors de l'objet, il fonctionne parfaitement.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

Il y a une différence importante entre les deux. Le for-in itère sur les propriétés d'un objet, donc lorsque le cas est un tableau, il itérera non seulement sur ses éléments mais également sur la fonction "remove" qu'il possède.

for (var i = 0; i < myArray.length; i++) { 
    console.log(i) 
}

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

Vous pouvez utiliser le for-in avec un if(myArray.hasOwnProperty(i)). Pourtant, lors de l'itération sur des tableaux, je préfère toujours éviter cela et utiliser simplement l'instruction for (;;).

Bien qu'ils se ressemblent tous les deux, il existe une différence mineure:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

dans ce cas, la sortie est:

NORME POUR LA BOUCLE:

TABLEAU [0] = A

TABLEAU [1] = B

TABLEAU [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

alors que dans ce cas la sortie est:

BOUCLE FOR-IN:

TABLEAU [1] = B

TABLEAU [2] = C

TABLEAU [10] = D

TABLEAU [ABC] = 123

L'instruction for in permet de parcourir les noms de toutes les propriétés d'un objet. Malheureusement, il parcourt également tous les membres hérités de la chaîne de prototypes. Cela a le mauvais effet secondaire de servir des fonctions de méthode lorsque l'intérêt est dans les membres de données.