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

Aktualisierte Antwort für 2012 die aktuelle Version aller gängigen Browser - Chrome, Firefox, IE9, Safari und Opera unterstützen nativen array.forEach von ES5.

Es sei denn, Sie haben einen Grund, IE8 nativ zu unterstützen (bedenken Sie, dass ES5-shim oder Chrome Frame für diese Benutzer bereitgestellt werden können, was eine ordentliche JS-Umgebung bietet), ist es sauberer, einfach die richtige Syntax der Sprache zu verwenden:

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

Die vollständige Dokumentation für array.forEach() finden Sie auf MDN.

Answer 2

Ich stimme den Meinungen zu, dass du die Iterationsmethode entsprechend deiner Bedürfnisse wählen solltest. Ich würde dir tatsächlich empfehlen, niemals durch native Array mit der for in Struktur zu loopen. Es ist deutlich langsamer und, wie Chase Seibert gerade erwähnte, nicht kompatibel mit dem Prototype-Framework.

Es gibt einen ausgezeichneten Vergleich der verschiedenen Schleifenstile, den du dir unbedingt anschauen solltest, wenn du mit JavaScript arbeitest. Führe keine frühen Optimierungen durch, aber behalte diese Informationen irgendwo in deinem Kopf.

Ich würde for in verwenden, um alle Eigenschaften eines Objekts zu bekommen, was besonders hilfreich ist, wenn du deine Skripte debuggst. Zum Beispiel habe ich diese Zeile gerne zur Hand, wenn ich ein unbekanntes Objekt erkunde:

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

Es gibt den Inhalt des gesamten Objekts (zusammen mit Methodenkörpern) in meinem Firebug-Protokoll aus. Sehr praktisch.

Answer 3

Die beiden sind nicht gleich, wenn das Array lückenhaft ist.

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

for (var k in array) {
  // Nicht garantiert durch die Sprachspezifikation, um in Reihenfolge zu durchlaufen.
  alert(k);  // Gibt 0, 1, 2, 5 aus.
  // Das Verhalten, wenn der Schleifenkörper zum Array hinzufügt, ist unklar.
}

for (var i = 0; i < array.length; ++i) {
  // Durchläuft in Reihenfolge.
  // i ist eine Zahl, keine Zeichenkette.
  alert(i);  // Gibt 0, 1, 2, 3, 4, 5 aus.
  // Das Verhalten, wenn der Schleifenkörper das Array ändert, ist klarer.
}

Answer 4

Mit forEach, um die Prototypenkette zu überspringen

Nur ein schneller Nachtrag zu @nailers Antwort oben, die Verwendung von forEach mit Object.keys bedeutet, dass Sie die Iteration über die Prototypenkette vermeiden können, ohne hasOwnProperty verwenden zu müssen.

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]);
});

Answer 5

Ich würde die verschiedenen Methoden je nachdem verwenden, wie ich auf die Elemente verweisen möchte.

Verwende foreach, wenn du nur das aktuelle Element möchtest.

Verwende for, wenn du einen Index benötigst, um relative Vergleiche durchzuführen. (z. B. wie verhält sich dies im Vergleich zum vorherigen/nächsten Element?)

Ich habe noch nie einen Leistungsunterschied bemerkt. Ich würde warten, bis es ein Leistungsproblem gibt, bevor ich mich darum sorge.