JavaScript for...in vs for

Question

Denkst du, dass es einen großen Unterschied zwischen for...in und for-Schleifen gibt? Welche Art von "for" ziehst du vor und warum?

Angenommen, wir haben ein Array von assoziativen Arrays:

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

Also können wir durchlaufen:

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

Und:

for (var i in myArray)

Ich sehe keinen großen Unterschied. Gibt es Leistungsprobleme?

Answer 1

Hier ist etwas, was ich gemacht habe.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // einfache for-Schleife
  f(o[i], i); // führe eine Funktion aus und mache das Objekt, objIndex verfügbar
 }
}

So wird es verwendet
es funktioniert auf Arrays und Objekten (wie z.B. einer Liste von HTML-Elementen)

foreach(o, function(obj, i) { // für jedes Objekt in o
  alert(obj); // obj
  alert(i); // obj-Index
  /*
    sagen wir, Sie haben ein HTML-Element behandelt, vielleicht eine Sammlung von Divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Ich habe das gerade gemacht, daher bin ich offen für Vorschläge :)

Answer 2

Mit for (var i in myArray) können Sie auch über Objekte iterieren, i wird den Schlüsselnamen enthalten und Sie können auf die Eigenschaft über myArray[i] zugreifen. Zusätzlich werden auch alle Methoden, die Sie dem Objekt hinzugefügt haben, in der Schleife enthalten sein, d.h. wenn Sie ein externes Framework wie jQuery oder Prototype verwenden oder Methoden direkt zu Objektprototypen hinzufügen, wird i an einem Punkt auf diese Methoden verweisen.

Answer 3

Pass auf!

Wenn Sie mehrere Skript-Tags haben und nach Informationen in Tag-Attributen suchen, müssen Sie die .length-Eigenschaft mit einer for-Schleife verwenden, weil es sich nicht um ein einfaches Array, sondern um ein HTMLCollection-Objekt handelt.

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

Wenn Sie die foreach-Anweisung für (var i in yourList) verwenden, gibt es in den meisten Browsern Eigenschaften und Methoden der HTMLCollection zurück!

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

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Wird alle Ihre Elementindizes ausgeben (Sie können den Wert des src-Attributs mit scriptTags[i].attributes[0].value erhalten)

for(var i in scriptTags)
alert(i); // Gibt "length", "item" und "namedItem" zusätzlich zu Ihren Elementen aus!

Auch wenn getElementsByTagName eigentlich eine NodeList zurückgeben sollte, geben die meisten Browser tatsächlich eine HTMLCollection zurück: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Answer 4

Wenn du deinen Code wirklich beschleunigen möchtest, was hältst du davon?

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

Es ist eine Art, die while-Logik innerhalb der for-Anweisung zu haben und es ist weniger redundant. Außerdem hat Firefox Array.forEach und Array.filter

Answer 5

Ich habe Probleme mit dem "for each" bei der Verwendung von Objekten und Prototypen und Arrays gesehen

Mein Verständnis ist, dass das for each für Eigenschaften von Objekten und NICHT für Arrays gedacht ist