Analysieren Sie die Beziehung zwischen JavaScript-Schleifen und -Bereich (Code im Anhang).

Wir verwenden bei unserer Arbeit häufig JavaScript und es steht in engem Zusammenhang mit unserer Arbeit. Es gibt jedoch eine Funktion von JavaScript, die Entwicklern Kopfschmerzen bereiten kann. Sie hängt mit Schleifen und Bereichen zusammen. Lassen Sie uns als Nächstes über die Beziehung zwischen ihnen sprechen.

Zum Beispiel:

const operations = []
for (var i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

Es führt grundsätzlich eine fünfmalige Schleife durch und fügt dem Operations-Array eine Funktion hinzu. Diese Funktion kann den Indexwert i der Schleifenvariablen ausdrucken.
Das erwartete Ergebnis nach der Ausführung dieser Funktionen sollte sein:
0 1 2 3 4

Aber was tatsächlich passiert, ist Folgendes:

5 5 5 5

Warum passiert das? Da die Variable var hochgestuft wird, entspricht der obige Code

var i;
const operations = []
for (i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

Daher in for-of While In der Schleife ist i immer noch sichtbar, es ist gleich 5 und dieser Wert wird jedes Mal verwendet, wenn i in der Funktion referenziert wird.
Was sollten wir also tun, um es zu dem zu machen, was wir wollen?
Die einfachste Lösung ist die Verwendung von Let-Deklarationen. Sie sind eine große Hilfe und können die Verwirrung bei der Verwendung von Var-Deklarationen vermeiden.
Ändern Sie einfach var in let, wenn Sie Variablen schleifen, und es wird gut funktionieren:

const operations = []
for (let i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

Dies ist die Ausgabe:

0 1 2 3 4

Wie ist das? Dies liegt daran, dass i bei jeder Wiederholung der Schleife neu erstellt wird und jede Funktion ihr eigenes i erhalten kann, wenn sie dem Operations-Array hinzugefügt wird.
Denken Sie daran, dass Sie in diesem Fall nicht const verwenden können, da dies dazu führt, dass for einen Fehler meldet, wenn versucht wird, während der zweiten Schleife einen neuen Wert zuzuweisen.
Eine weitere sehr häufige Lösung für dieses Problem ist die Verwendung von Code vor ES6, der als „sofort aufgerufener Funktionsausdruck“ (IIFE) bezeichnet wird.
In diesem Fall können Sie die gesamte Funktion umschließen und i Bind daran übergeben . Auf diese Weise erstellen Sie eine Funktion, die sofort ausgeführt werden kann, und geben daraus eine neue Funktion zurück. Damit wir es später ausführen können.

const operations = []
for (var i = 0; i < 5; i++) {
  operations.push(((j) => {
    return () => console.log(j)
  })(i))
}
for (const operation of operations) {
  operation()
}

Das obige ist der detaillierte Inhalt vonAnalysieren Sie die Beziehung zwischen JavaScript-Schleifen und -Bereich (Code im Anhang).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!