Wie können Sie bei der Verwendung von Abschlüssen in JavaScript-Schleifen sicherstellen, dass jeder Abschluss den richtigen Wert erfasst?

Abschlüsse in JavaScript-Schleifen: Ein praktisches Beispiel

In JavaScript tritt ein häufiges Problem auf, wenn Abschlüsse innerhalb von Schleifen verwendet werden, bei denen der Wert von a Die vom Abschluss erfasste Variable ist nicht der erwartete Wert.

Problem:

Beim Definieren von Funktionen innerhalb einer Schleife mit dem Schlüsselwort var verweisen alle Funktionen auf dieselbe Variable außerhalb von Schleife. Dies kann zu unerwarteten Ergebnissen führen, wie im folgenden Code zu sehen ist:

<code class="js">var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

Beim Ausführen dieses Codes wird „Mein Wert: 3“ dreimal gedruckt, obwohl wir davon ausgehen, dass er sich von 0 auf 2 erhöht.

Lösungen:

ES6-Lösung: Let

In ECMAScript 6 (ES6) führt das Schlüsselwort let den Blockbereich für Variablen ein. was dieses Problem löst. Mit let erstellt jede Iteration der Schleife eine neue Variable i mit einem auf die Schleife beschränkten Gültigkeitsbereich:

<code class="js">for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

ES5.1-Lösung: forEach

In Umgebungen die die Funktion Array.prototype.forEach unterstützen, können wir ihre Einzigartigkeit nutzen, um für jede Iteration unterschiedliche Abschlüsse zu erstellen. Die Callback-Funktion empfängt das aktuelle Element des Arrays als Parameter und stellt so sicher, dass jede Funktion einen eindeutigen Wert erfasst:

<code class="js">var funcs = [];
[0, 1, 2].forEach(function(i) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
});</code>

Klassische Lösung: Abschlüsse

Der Klassiker Die Lösung besteht darin, einen Abschluss zu erstellen, der die Variable an einen bestimmten Wert außerhalb der Schleife bindet. Dies wird erreicht, indem eine neue Funktion zurückgegeben wird, die den gewünschten Wert erfasst:

<code class="js">for (var i = 0; i < 3; i++) {
  funcs[i] = (function(i) {
    return function() {
      console.log("My value:", i);
    };
  })(i);
}</code>

Indem wir i als Argument an die innere Funktion übergeben, stellen wir sicher, dass jeder Abschluss den richtigen Wert erfasst.

Das obige ist der detaillierte Inhalt vonWie können Sie bei der Verwendung von Abschlüssen in JavaScript-Schleifen sicherstellen, dass jeder Abschluss den richtigen Wert erfasst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!