JavaScript für … in vs für

Lesezeit: 2 Minuten

JavaScript fur in vs fur
andrii

Glauben Sie, dass es einen großen Unterschied zwischen for…in- und for-Schleifen gibt? Welche Art von “für” verwenden Sie am liebsten und warum?

Nehmen wir an, wir haben ein Array von assoziativen Arrays:

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

Wir können also iterieren:

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

Und:

for (var i in myArray)

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

  • Beachten Sie, dass wir auch ab JS 1.6verfügen über: myArray.forEach(callback[, thisarg]).

    – Benji XVI

    6. Januar 2012 um 10:32 Uhr


  • @Benji array.forEach ist eigentlich in ES5.

    – Mikemaccana

    11. Januar 2012 um 20:59 Uhr

  • In einer for-in-Schleife benötigen Sie eine Bedingung, die so aussieht: if(myArray.hasOwnProperty(i)){true}

    – Eric Hodonsky

    27. März 2012 um 22:18 Uhr

  • ['foo', 'bar', 'baz'].forEach(function(element, index, array){ console.log(element, index, array); }); kann so ziemlich überall verwendet werden, außer in IE8 – und es ist bei weitem die eleganteste Syntax

    – Jon z

    26. September 2012 um 17:51 Uhr


  • Es gibt auch for...of Aussage ein ECMAScript 6zum Beispiel: for (let i of myArray) console.log(i);

    – Vitalii Fedorenko

    5. Mai 2015 um 23:01 Uhr


JavaScript fur in vs fur
AnthonyWJones

Die Wahl sollte darauf basieren, welches Idiom 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]

Wenn Sie keine weltbewegenden Gründe haben, halten Sie sich an das etablierte Nutzungsmuster.

  • Es sollte erwähnt werden, dass es eine nette Praxis ist, for…in mit der Filterung der if-Anweisung zu verwenden. Es gibt eine praktische Methode des Objekts “obj.hasOwnProperty(member)”, die überprüft, ob ein vom Iterator zurückgegebenes Mitglied tatsächlich Mitglied des Objekts ist. Sehen: javascript.crockford.com/code.html

    – Damir Zekić

    29. Oktober 2008 um 23:09 Uhr

  • Wie bei anderen Antworten kommentiert, funktioniert “for … in” für Arrays nicht richtig, da es über alle Array-Eigenschaften und -Methoden iteriert. Daher sollten Sie “for…in” nur zum Iterieren über Objekteigenschaften verwenden. Ansonsten bleiben Sie bei “for(i=0; i

    – Denilson Sá Maia

    10. April 2010 um 18:03 Uhr

  • Aus Leistungsgründen ist es meiner Meinung nach besser, die Länge des Arrays vor dem auszuwerten fora.length nicht jedes Mal in der Schleife auswerten.

    – UpTheCreek

    22. März 2012 um 13:46 Uhr

  • @UpTheCreek: Das ist definitiv wahr, wenn das Array tatsächlich etwas ist, das vom HTMLDOM zurückgegeben wird, aber ich frage mich, wie groß ein Standard-Javascript-Array sein müsste, bevor Sie einen nennenswerten Unterschied sehen könnten? Persönlich würde ich den Code so einfach wie möglich halten, bis es sich als notwendig erweist, etwas anderes zu tun.

    – Anthony W Jones

    22. März 2012 um 18:14 Uhr

  • @Pichan Ich denke du meinst i < lnicht i < ain Ihrer for-Schleife-Bedingung.

    – Max Nanasy

    8. Januar 2013 um 3:28 Uhr

1646310912 432 JavaScript fur in vs fur
Benno Richters

Douglas Crockford empfiehlt in JavaScript: Die guten Teile (Seite 24), um die Verwendung von zu vermeiden for in Aussage.

Wenn du benutzt for in Um Eigenschaftsnamen in einem Objekt zu durchlaufen, werden die Ergebnisse nicht geordnet. Schlimmer: Sie könnten unerwartete Ergebnisse erhalten; Sie enthält Mitglieder, die von der Prototypkette geerbt wurden, und den Namen von Methoden.

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

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

  • for…in ist perfekt geeignet, um Objekteigenschaften zu durchlaufen. Es ist nicht geeignet, um Array-Elemente zu durchlaufen. Wenn Sie den Unterschied zwischen diesen Szenarien nicht verstehen können, dann ja, Sie sollten for … in vermeiden; ansonsten verrückt werden.

    – Shog9

    28. Oktober 2008 um 18:40 Uhr

  • Möchte die Tatsache betonen, dass es NICHT BESTELLT wird! Dies könnte ein großes Problem darstellen und wäre ein schwer zu fangender Fehler.

    – Jason

    4. August 2009 um 17:39 Uhr

  • +1 für “es enthält von der Prototypkette geerbte Mitglieder und den Namen der Methoden.” Sie werden Spaß haben, wenn jemand Ihren Code beispielsweise mit geladenem Prototype verwendet (selbst wenn Ihr Code ihn nicht wirklich verwendet).

    – ijw

    5. August 2009 um 12:11 Uhr

  • Bitte nicht vergessen erklären der name Variable: for(var name in object)...andernfalls, wenn sich dieser Code beispielsweise in einer Funktion befindet, die name Variable am Ende eine Eigenschaft des globalen Objekts (eine Zuweisung an eine undeklarierter Identifizierer tut das), auch im neuen ECMAScript 5 Strict Mode, wird dieser Code a auslösen ReferenceError.

    – Christian C. Salvado

    23. Oktober 2010 um 21:08 Uhr

  • @Nosredna: Es gibt ein Problem mit der Iterationsreihenfolge für Chrome, das von niemand anderem als John Resig eingereicht wurde und als WontFix gekennzeichnet ist. code.google.com/p/chromium/issues/detail?id=883 . Auch vor Chrome war die Reihenfolge der Iteration nicht in allen Browsern gleich, wenn Sie eine Eigenschaft entfernen und dann wieder hinzufügen. Auch IE 9 verhält sich sehr ähnlich wie Chrome (angeblich für Geschwindigkeitsverbesserungen). Also… Hören Sie bitte auf, ungenaue Informationen zu verbreiten, es wäre sehr naiv, sich darauf zu verlassen.

    – Juan Mendes

    1. September 2011 um 21:54 Uhr

FYI – jQuery-Benutzer


jQuerys each(callback) Methode verwendet for( ; ; ) Schleife standardmäßig und wird verwendet for( in ) nur wenn die länge ist undefined.

Daher würde ich sagen, dass es sicher ist, die richtige Reihenfolge anzunehmen, wenn Sie diese Funktion verwenden.

Beispiel:

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

Der Nachteil dieser Verwendung besteht darin, dass Ihre Funktionen weniger auf andere Frameworks übertragbar sind, wenn Sie eine Nicht-UI-Logik ausführen. Die each() Die Funktion ist wahrscheinlich am besten für die Verwendung mit jQuery-Selektoren und reserviert for( ; ; ) wäre ansonsten ratsam.


  • Es gibt immer documentcloud.github.com/underscore die _.each und eine ganze Menge anderer nützlicher Funktionen hat

    – w00t

    29. November 2011 um 11:01 Uhr


  • Bedeutet es auch, wenn ich die Eigenschaft length in meinem Objekt $.each habe, wird es fehlschlagen? zB x= { a:”1″, b:”2″, Länge:3 }.

    – Onur Topal

    13. Juni 2013 um 12:17 Uhr

Es gibt Leistungsunterschiede, je nachdem, welche Art von Schleife Sie verwenden und welchen Browser Sie verwenden.

Zum Beispiel:

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

ist bei manchen 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).

Beachten Sie, dass die native Array.forEach-Methode jetzt ist breit unterstützt.

  • Was tut es? Hat es die in anderen Beiträgen erwähnten Probleme (Überschleifen von Eigenschaften anstelle von Elementen eines Arrays)? Da IE8 es auch nicht unterstützt, ist es etwas übertrieben zu sagen, dass es weit verbreitet ist.

    – Rauni Lillemets

    16. August 2011 um 8:13 Uhr

  • So sehr *nix-Benutzer es verachten, IE8 ist vor allem Sub-Windows7-Benutzer. das ist ein riesiger Teil des Browser-Marktes.

    – sbartel

    12. September 2011 um 18:30 Uhr

  • @Rauni – Ich verstehe Ihren Standpunkt, aber für Desktop-Geräte beträgt der Anteil des IE-Browsers laut. weniger als 40% en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_tableund gem marketshare.hitslink.com/… und anderen Websites sind mindestens 8 % der Browser IE 9. Mit anderen Worten, Array.forEach wird von etwa 70 % der Desktop-Browser unterstützt, daher halte ich „weitgehend unterstützt“ nicht für unangemessen. Ich habe es nicht überprüft, aber die mobile Unterstützung (auf WebKit- und Opera-Browsern) ist möglicherweise noch höher. Offensichtlich gibt es erhebliche geografische Unterschiede.

    – Sam Dutton

    13. September 2011 um 11:44 Uhr

  • Danke für das Update. Ich stimme zu, dass man sagen könnte, dass es “weithin unterstützt” wird. Das einzige Problem ist, dass der Benutzer, wenn er diese JS-Methode verwendet, immer noch eine Sicherungsmethode für den Fall schreiben muss, wenn sie nicht unterstützt wird.

    – Rauni Lillemets

    27. September 2011 um 12:17 Uhr

  • @Rauni – Sie können es5-shim und es6-shim verwenden, um automatisch Backup-Methoden bereitzustellen. github.com/es-shims/es5-shim

    – Michiel van der Blonk

    9. Mai 2015 um 11:46 Uhr

Aktualisierte Antwort für 2012 aktuelle Version aller gängigen Browser – Chrome, Firefox, IE9, Safari und Opera unterstützen ES5s natives array.forEach.

Sofern Sie keinen Grund haben, IE8 nativ zu unterstützen (beachten Sie, dass diesen Benutzern ES5-Shim oder Chrome-Frame zur Verfügung gestellt werden kann, wodurch eine ordnungsgemäße JS-Umgebung bereitgestellt wird), ist es sauberer, einfach die richtige Syntax der Sprache zu verwenden:

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

Vollständige Dokumentation für array.forEach() ist bei MDN.

  • Was tut es? Hat es die in anderen Beiträgen erwähnten Probleme (Überschleifen von Eigenschaften anstelle von Elementen eines Arrays)? Da IE8 es auch nicht unterstützt, ist es etwas übertrieben zu sagen, dass es weit verbreitet ist.

    – Rauni Lillemets

    16. August 2011 um 8:13 Uhr

  • So sehr *nix-Benutzer es verachten, IE8 ist vor allem Sub-Windows7-Benutzer. das ist ein riesiger Teil des Browser-Marktes.

    – sbartel

    12. September 2011 um 18:30 Uhr

  • @Rauni – Ich verstehe Ihren Standpunkt, aber für Desktop-Geräte beträgt der Anteil des IE-Browsers laut. weniger als 40% en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_tableund gem marketshare.hitslink.com/… und anderen Websites sind mindestens 8 % der Browser IE 9. Mit anderen Worten, Array.forEach wird von etwa 70 % der Desktop-Browser unterstützt, daher halte ich „weitgehend unterstützt“ nicht für unangemessen. Ich habe es nicht überprüft, aber die mobile Unterstützung (auf WebKit- und Opera-Browsern) ist möglicherweise noch höher. Offensichtlich gibt es erhebliche geografische Unterschiede.

    – Sam Dutton

    13. September 2011 um 11:44 Uhr

  • Danke für das Update. Ich stimme zu, dass man sagen könnte, dass es “weithin unterstützt” wird. Das einzige Problem ist, dass der Benutzer, wenn er diese JS-Methode verwendet, immer noch eine Sicherungsmethode für den Fall schreiben muss, wenn sie nicht unterstützt wird.

    – Rauni Lillemets

    27. September 2011 um 12:17 Uhr

  • @Rauni – Sie können es5-shim und es6-shim verwenden, um automatisch Backup-Methoden bereitzustellen. github.com/es-shims/es5-shim

    – Michiel van der Blonk

    9. Mai 2015 um 11:46 Uhr

1646310913 274 JavaScript fur in vs fur
Mike Samuel

Die beiden sind nicht gleich, wenn das Array spärlich 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.
}

923430cookie-checkJavaScript für … in vs für

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy