Analyser la relation entre les boucles JavaScript et la portée (code ci-joint)

Nous utilisons souvent JavaScript dans notre travail, et cela est étroitement lié à notre travail. Mais il existe une fonctionnalité de JavaScript qui peut causer des maux de tête aux développeurs. Elle est liée aux boucles et aux étendues. Parlons ensuite de la relation entre elles.

Par exemple :

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

Il boucle essentiellement 5 fois et ajoute une fonction au tableau des opérations. Cette fonction peut imprimer la valeur d'index de la variable de boucle i.
Le résultat attendu après l'exécution de ces fonctions devrait être :
0 1 2 3 4

Mais ce qui se passe réellement est le suivant :

5 5 5 5

Pourquoi cela se produit-il ? Parce que var est utilisé puisque la variable var est promue, le code ci-dessus est équivalent à

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

Par conséquent, dans for. Dans la boucle -of, i est toujours visible, il est égal à 5, et cette valeur sera utilisée à chaque fois que i sera impliqué dans la fonction.
Alors, que devons-nous faire pour en faire ce que nous voulons ?
La solution la plus simple est d'utiliser les déclarations let Introduites dans ES2015, elles sont d'une grande aide et peuvent éviter la confusion liée à l'utilisation des déclarations var.
Changez simplement var en let lors de la boucle des variables, et cela fonctionnera bien :

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

Voici le résultat :

0 1 2 3 4

Comment est-ce réalisé ? En effet, chaque fois que la boucle est répétée, i sera recréé en même temps, lorsque chaque fonction ajoute le tableau d'opérations, elle peut obtenir son propre i.
N'oubliez pas que vous ne pouvez pas utiliser const dans ce cas, car cela entraînera le signalement d'une erreur par le for lors de la tentative d'attribution d'une nouvelle valeur lors de la deuxième boucle.
Une autre solution très courante à ce problème consiste à utiliser du code pré-ES6, et cela s'appelle une expression de fonction immédiatement invoquée (IIFE).
Dans ce cas, vous pouvez envelopper la fonction entière et lui transmettre i Bind. . De cette façon, vous créez une fonction qui peut être exécutée immédiatement et vous en renvoyez une nouvelle fonction. Nous pourrons donc l'exécuter plus tard.

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

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!