JavaScript für… in vs für

Denken Sie, dass es einen großen Unterschied zwischen for ... in und for-Schleifen gibt? Welche Art von "für" bevorzugen Sie und warum?

Angenommen, wir haben ein Array von assoziativen Arrays:

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

So können wir iterieren:

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

Und:

for (var i in myArray)

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

Die Wahl sollte auf der Sprache basieren, die am besten verstanden wird.

Ein Array wird iteriert mit:

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

Ein Objekt, das als assoziatives Array verwendet wird, wird iteriert mit:

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

Halten Sie sich an das etablierte Verwendungsmuster, es sei denn, Sie haben erderschütternde Gründe.

Douglas Crockford empfiehlt in JavaScript: The Good Parts (Seite 24), die Verwendung der for inAnweisung zu vermeiden .

Wenn Sie die for inEigenschaftsnamen in einem Objekt durchlaufen, werden die Ergebnisse nicht sortiert. Schlimmer noch: Möglicherweise erhalten Sie unerwartete Ergebnisse. Es enthält Mitglieder, die von der Prototypenkette geerbt wurden, und den Namen der Methoden.

Alles außer den Eigenschaften kann mit herausgefiltert werden .hasOwnProperty. Dieses Codebeispiel macht das, was Sie ursprünglich wahrscheinlich wollten:

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

Zu Ihrer Information - jQuery-Benutzer

Die each(callback)Methode for( ; ; )von jQuery verwendet standardmäßig eine Schleife und wird for( in ) nur verwendet, wenn die Länge gleich ist undefined.

Daher würde ich sagen, dass es sicher ist, bei Verwendung dieser Funktion die richtige Reihenfolge anzunehmen.

Beispiel :

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

Der Nachteil bei der Verwendung ist, dass Ihre Funktionen für andere Frameworks weniger portabel sind, wenn Sie eine Nicht-UI-Logik verwenden. Die each()Funktion ist wahrscheinlich am besten für die Verwendung mit jQuery-Selektoren reserviert und for( ; ; )kann ansonsten empfohlen werden.

Es gibt Leistungsunterschiede, je nachdem, welche Art von Schleife Sie verwenden und in welchem ​​Browser.

Zum Beispiel:

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

ist in einigen Browsern fast doppelt so schnell wie:

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

Wenn Ihre Arrays jedoch nicht RIESIG sind oder Sie sie ständig schleifen, sind alle schnell genug. Ich bezweifle ernsthaft, dass Array-Looping ein Engpass in Ihrem Projekt ist (oder für jedes andere Projekt in dieser Angelegenheit).

Beachten Sie, dass die native Array.forEach-Methode jetzt weitgehend unterstützt wird .

Die aktualisierte Antwort für die aktuelle Version 2012 aller gängigen Browser - Chrome, Firefox, IE9, Safari und Opera - unterstützt das native Array.forEach von ES5.

Sofern Sie keinen Grund haben, IE8 nativ zu unterstützen (unter Berücksichtigung der Tatsache, dass diesen Benutzern ES5-Shim oder Chrome-Frame zur Verfügung gestellt werden können, um eine ordnungsgemäße JS-Umgebung bereitzustellen), 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 unter MDN.

Die beiden sind nicht gleich, wenn das Array dünn ist.

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

Verwenden von forEach zum Überspringen der Prototypenkette

Nur eine kurze Ergänzung zu der Antwort von @ nailer oben : Wenn Sie forEach mit Object.keys verwenden, können Sie vermeiden, dass Sie über die Prototypenkette iterieren, 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]);
});

Ich bin der Meinung, dass Sie die Iterationsmethode entsprechend Ihren Anforderungen auswählen sollten. Ich würde vorschlagen, dass Sie eigentlich nie native Arraymit for inStruktur durchlaufen . Es ist viel langsamer und , wie Chase Seibert im Moment betonte, nicht mit dem Prototype-Framework kompatibel.

Es gibt einen hervorragenden Benchmark für verschiedene Schleifenstile, den Sie unbedingt beachten sollten, wenn Sie mit JavaScript arbeiten . Nehmen Sie keine frühen Optimierungen vor, aber Sie sollten das Zeug irgendwo im Hinterkopf behalten.

Ich würde verwenden for in, um alle Eigenschaften eines Objekts abzurufen, was besonders beim Debuggen Ihrer Skripte nützlich ist. Zum Beispiel möchte ich diese Zeile zur Hand haben, wenn ich unbekannte Objekte erkunde:

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

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

Hier ist etwas, was ich getan habe.

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
 }
}

So würden Sie es verwenden.
Dies funktioniert bei Arrays und Objekten (z. B. einer Liste von HTML-Elementen).

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

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

Ich würde die verschiedenen Methoden verwenden, basierend darauf, wie ich auf die Elemente verweisen wollte.

Verwenden Sie foreach, wenn Sie nur das aktuelle Element möchten.

Verwenden Sie diese Option, wenn Sie einen Indexer für relative Vergleiche benötigen. (Dh wie ist das im Vergleich zum vorherigen / nächsten Artikel?)

Ich habe noch nie einen Leistungsunterschied bemerkt. Ich würde warten, bis ein Leistungsproblem auftritt, bevor ich mir darüber Sorgen mache.

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

Achtung!

Wenn Sie mehrere Skript-Tags haben und beispielsweise Informationen in Tag-Attributen suchen, müssen Sie die Eigenschaft .length mit einer for-Schleife verwenden, da 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, werden in den meisten Browsern Eigenschaften und Methoden der HTMLCollection zurückgegeben!

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!

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

Denn in-Schleifen auf Arrays sind nicht mit Prototype kompatibel. Wenn Sie der Meinung sind, dass Sie diese Bibliothek in Zukunft möglicherweise verwenden müssen, ist es sinnvoll, sich an for-Schleifen zu halten.

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

Ich habe Probleme mit dem "für jeden" bei der Verwendung von Objekten, Prototypen und Arrays gesehen

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

Wenn Sie Ihren Code wirklich beschleunigen möchten, was ist damit?

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

Es ist eine Art while-Logik in der for-Anweisung und weniger redundant. Firefox hat auch Array.forEach und Array.filter

Ein kürzerer und bester Code laut jsperf ist

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

Verwenden Sie die Array (). ForEach-Schleife, um die Parallelität zu nutzen

für (;;) ist für Arrays : [20,55,33]

for..in ist für Objekte : {x: 20, y: 55: z: 33}

Achtung!!! Ich verwende Chrome 22.0 unter Mac OS und habe Probleme mit der Syntax für jede Syntax.

Ich weiß nicht, ob dies ein Browserproblem, ein Javascript-Problem oder ein Fehler im Code ist, aber es ist SEHR seltsam. Außerhalb des Objekts funktioniert es perfekt.

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

Es gibt einen wichtigen Unterschied zwischen beiden. Das For-In durchläuft die Eigenschaften eines Objekts. Wenn es sich also um ein Array handelt, durchläuft es nicht nur seine Elemente, sondern auch die Funktion "Entfernen".

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

Sie können das For-In mit einem verwenden if(myArray.hasOwnProperty(i)). Wenn ich über Arrays iteriere, ziehe ich es jedoch immer vor, dies zu vermeiden und nur die for (;;) - Anweisung zu verwenden.

Obwohl beide sehr ähnlich sind, gibt es einen kleinen Unterschied:

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
}

In diesem Fall lautet die Ausgabe:

STANDARD FÜR LOOP:

ARRAY [0] = A.

ARRAY [1] = B.

ARRAY [2] = C.

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

In diesem Fall lautet die Ausgabe:

FOR-IN-SCHLEIFE:

ARRAY [1] = B.

ARRAY [2] = C.

ARRAY [10] = D.

ARRAY [ABC] = 123

Die for in-Anweisung ermöglicht das Durchlaufen der Namen aller Eigenschaften eines Objekts. Leider durchläuft es auch alle Mitglieder, die durch die Prototypenkette geerbt wurden. Dies hat den schlechten Nebeneffekt, dass Methodenfunktionen bereitgestellt werden, wenn das Interesse an den Datenelementen liegt.