(Update: Meine andere Antwort hier beschreibt die Nicht-jQuery-Optionen viel gründlicher. Die dritte Option unten jQuery.each
ist jedoch nicht enthalten.)
Vier Optionen:
Generische Schleife:
var i;
for (i = 0; i < substr.length; ++i) {
// do something with `substr[i]`
}
oder in ES2015 +:
for (let i = 0; i < substr.length; ++i) {
// do something with `substr[i]`
}
Vorteile : Unkompliziert, keine Abhängigkeit von jQuery, leicht zu verstehen, keine Probleme mit der Beibehaltung der Bedeutung this
innerhalb des Schleifenkörpers, kein unnötiger Overhead von Funktionsaufrufen (z. B. theoretisch schneller, obwohl dies tatsächlich erforderlich wäre haben so viele Elemente, dass die Chancen stehen, dass Sie andere Probleme haben würden; Details ).
ES5 forEach
:
Ab ECMAScript5 verfügen Arrays über eine forEach
Funktion, die das Durchlaufen des Arrays erleichtert:
substr.forEach(function(item) {
// do something with `item`
});
Link zu Dokumenten
(Hinweis: Es gibt viele andere Funktionen, nicht nur forEach
; Einzelheiten finden Sie in der oben genannten Antwort .)
Vorteile : Deklarativ, kann eine vorgefertigte Funktion für den Iterator verwenden, wenn Sie eine zur Hand haben. Wenn Ihr Schleifenkörper komplex ist, ist i
der Umfang eines Funktionsaufrufs manchmal nützlich, ohne dass eine Variable in Ihrem enthaltenen Bereich erforderlich ist .
Nachteile : Wenn Sie mit this
im Code enthalten und die Sie verwenden möchten this
in Ihrem forEach
Rückruf, müssen Sie entweder A) Halten Sie es in einer Variablen , so können Sie es innerhalb der Funktion, B) als zweites Argument Pass verwenden , um forEach
so forEach
legt es als this
während des Rückrufs oder C) Verwendung ein ES2015 + Funktion Pfeil , der über schließt this
. Wenn Sie nicht eines dieser Dinge tun, in der Callback this
wird undefined
(im Strict - Modus) oder das globale Objekt ( window
) in losen Modus. Früher gab es einen zweiten Nachteil, forEach
der nicht allgemein unterstützt wurde, aber hier im Jahr 2018 ist der einzige Browser, auf den Sie stoßen werden, der nicht vorhanden forEach
ist, IE8 (und er kann nicht richtig sein dort auch polygefüllt).
ES2015 + 's for-of
:
for (const s of substr) { // Or `let` if you want to modify it in the loop body
// do something with `s`
}
Weitere Informationen zur Funktionsweise finden Sie in der Antwort oben in dieser Antwort.
Vorteile : Einfach, unkompliziert, bietet eine Variable (oder Konstante oben) für den Eintrag aus dem Array.
Nachteile : Wird in keiner IE-Version unterstützt.
jQuery.each:
jQuery.each(substr, function(index, item) {
// do something with `item` (or `this` is also `item` if you like)
});
( Link zu Dokumenten )
Vorteile : Die gleichen Vorteile wie forEach
, und Sie wissen, dass es da ist, da Sie jQuery verwenden.
Nachteile : Wenn Sie this
den enthaltenen Code verwenden, müssen Sie ihn in eine Variable einfügen, damit Sie ihn innerhalb der Funktion verwenden können, da this
dies etwas anderes innerhalb der Funktion bedeutet.
Sie können die this
Sache jedoch vermeiden , indem Sie entweder Folgendes verwenden $.proxy
:
jQuery.each(substr, $.proxy(function(index, item) {
// do something with `item` (`this` is the same as it was outside)
}, this));
... oder Function#bind
:
jQuery.each(substr, function(index, item) {
// do something with `item` (`this` is the same as it was outside)
}.bind(this));
... oder in ES2015 ("ES6") eine Pfeilfunktion:
jQuery.each(substr, (index, item) => {
// do something with `item` (`this` is the same as it was outside)
});
Was NICHT zu tun ist:
Nicht dafür verwenden for..in
(oder wenn Sie dies tun, tun Sie dies mit angemessenen Sicherheitsvorkehrungen). Sie werden Leute sehen, die zu sagen (tatsächlich gab es hier kurz eine Antwort, die das sagt), aber for..in
nicht das tun, was viele Leute denken (es tut etwas noch Nützlicheres!). Durchläuft insbesondere for..in
die aufzählbaren Eigenschaftsnamen eines Objekts (nicht die Indizes eines Arrays). Da Arrays Objekte sind und ihre einzigen aufzählbaren Eigenschaften standardmäßig die Indizes sind, scheint dies in einer langweiligen Bereitstellung meistens eine Art Arbeit zu sein. Aber es ist keine sichere Annahme, dass Sie es einfach dafür verwenden können. Hier ist eine Erkundung: http://jsbin.com/exohi/3
Ich sollte das "nicht" oben weicher machen. Wenn Sie es zu tun mit spärlichen Arrays (zB das Array 15 Elemente insgesamt aber ihre Indizes werden über den Bereich von 0 bis 150.000 aus irgendeinem Grunde gestreut, und so das length
ist 150.001), und wenn Sie verwenden geeignete Garantien wie hasOwnProperty
und Überprüfung der Der Eigenschaftsname ist wirklich numerisch (siehe Link oben). for..in
Dies kann ein vernünftiger Weg sein, um viele unnötige Schleifen zu vermeiden, da nur die aufgefüllten Indizes aufgelistet werden.
.each()
oderfor...in
Überlaufen eines Arrays ist im Allgemeinen eine schlechte Idee. Es ist wie Alter langsamer als mitfor
oderwhile
. Mit a istfor loop
es sogar eine gute Idee, dielength
Eigenschaft vor dem Schleifen zwischenzuspeichern.for (var i = 0, len = substr.length; i < len; ...
Function#bind
. :-) Guter Punkt, hinzugefügt.i++
und++i
ist das Ergebnis dieses Ausdrucks, der im obigen Beispiel niemals verwendet wird. Einefor
Schleife funktioniert folgendermaßen: 1. Initialisierung, 2. Test (Beenden, wenn false), 3. Body, 4. Update, 5. Zurück zu Schritt 2. Das Ergebnis des Update-Ausdrucks wird für nichts verwendet.jQuery.each ()
jQuery.each ()
Array-Iteration
Objektiteration
Beispiel :
Javascript-Schleifen für Array
für Schleife
Beispiel
für in
für von
für jedes
Ressourcen
MDN-Schleifen und Iteratoren
quelle
Hier ist keine Abfrage erforderlich, nur eine
for
Schleife funktioniert:quelle
Option 1: Die traditionelle
for
SchleifeDie Grundlagen
Eine traditionelle
for
Schleife besteht aus drei Komponenten:Diese drei Komponenten sind durch ein
;
Symbol voneinander getrennt . Der Inhalt für jede dieser drei Komponenten ist optional, was bedeutet, dass Folgendes die minimalstefor
Schleife ist, die möglich ist:Natürlich müssen Sie ein
if(condition === true) { break; }
oderif(condition === true) { return; }
irgendwo in diesefor
Schleife einfügen, damit sie nicht mehr läuft.Normalerweise wird die Initialisierung jedoch verwendet, um einen Index zu deklarieren, die Bedingung wird verwendet, um diesen Index mit einem minimalen oder maximalen Wert zu vergleichen, und der nachträgliche Gedanke wird verwendet, um den Index zu erhöhen:
Verwenden einer
for
traditionellen Schleife zum Durchlaufen eines ArraysDie traditionelle Art, ein Array zu durchlaufen, ist folgende:
Wenn Sie es vorziehen, rückwärts zu schleifen, gehen Sie folgendermaßen vor:
Es sind jedoch viele Variationen möglich, wie z. dieses :
... oder dieses ...
... oder dieses :
Was am besten funktioniert, hängt hauptsächlich vom persönlichen Geschmack und dem spezifischen Anwendungsfall ab, den Sie implementieren.
Hinweis :Jede dieser Varianten wird von allen Browsern unterstützt, auch von sehr alten!
Option 2: Die
while
SchleifeEine Alternative zu einer
Hinweis :for
Schleife ist einewhile
Schleife. Um ein Array zu durchlaufen, können Sie Folgendes tun:Wie herkömmliche
for
-loops werdenwhile
-loops auch von den ältesten Browsern unterstützt.Außerdem kann jede while-Schleife als
for
-loop umgeschrieben werden . Zum Beispielwhile
verhält sich die oben genannte Schleife genauso wie diesefor
Schleife:Option 3:
for...in
undfor...of
In JavaScript können Sie dies auch tun:
Dies sollte jedoch mit Vorsicht angewendet werden, da es sich nicht
for
in allen Fällen wie eine traditionelle Schleife verhält und potenzielle Nebenwirkungen berücksichtigt werden müssen. Siehe Warum ist die Verwendung von "for ... in" mit Array-Iteration eine schlechte Idee?für mehr Details.Als Alternative dazu
Hinweis :for...in
gibt es jetzt auch fürfor...of
. Das folgende Beispiel zeigt den Unterschied zwischen einerfor...of
Schleife und einerfor...in
Schleife:Sie müssen auch berücksichtigen, dass keine Version von Internet Explorer unterstützt
for...of
( Edge 12+ ) und dassfor...in
mindestens IE10 erforderlich ist.Option 4:
Array.prototype.forEach()
Eine Alternative zu
Hinweis :For
-loops istArray.prototype.forEach()
die folgende Syntax:Array.prototype.forEach()
wird von allen modernen Browsern sowie von IE9 + unterstützt.Option 5:
jQuery.each()
Zusätzlich zu den vier anderen genannten Optionen hatte jQuery auch eine eigene
foreach
Variante.Es verwendet die folgende Syntax:
quelle
Verwenden Sie die
each()
Funktion von jQuery.Hier ist ein Beispiel:
quelle
Verwenden Sie jQuery
each()
. Es gibt andere Möglichkeiten, aber jede ist für diesen Zweck konzipiert.Und setzen Sie das Komma nicht nach der letzten Zahl.
quelle
Sie können eine
for()
Schleife verwenden:quelle
ES6-Syntax mit Pfeilfunktion und Interpolation:
quelle
Versuche dies:
quelle
Alternative Iterationsmethoden durch Array / String mit Nebenwirkungen
quelle