Comment éviter les problèmes de fermeture dans les boucles en JavaScript ?

Fermeture JavaScript à l'intérieur des boucles : un exemple pratique

Le problème rencontré lors de l'itération dans des boucles et du stockage de fonctions anonymes est que les variables contenues dans ces fonctions référencer la même variable en dehors de la boucle. Cela peut entraîner un comportement inattendu lorsque vous essayez d'enregistrer les valeurs de ces variables.

Solution 1 : ES6 Let Statement

ES6 introduit le mot-clé let, qui crée un nouveau portée variable pour chaque itération de la boucle. Cela garantit que chaque fonction anonyme possède sa propre variable distincte, résolvant ainsi le problème de fermeture.

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

Solution 2 : méthode ES5.1 ForEach

Pour les situations impliquant principalement itération de tableau, la méthode forEach fournit une solution simple. Chaque itération de la fonction de rappel aura sa propre fermeture et recevra l'élément actuel du tableau.

<code class="js">var someArray = [...];
someArray.forEach(function(arrayElement) {
  // Code for the specific array element
  // ...
});</code>

Solution 3 : Fermeture classique

Une autre solution est pour lier la variable dans chaque fonction à une valeur distincte et immuable en dehors de la fonction. Ceci peut être réalisé à l'aide d'une fonction d'assistance :

<code class="js">function createFunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createFunc(i);
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!