Tutoriel sur les générateurs JavaScript

Les générateurs sont un type spécial de fonction avec la possibilité de se mettre en pause et de reprendre plus tard, permettant à d'autres codes de s'exécuter entre-temps.

Les générateurs sont un type spécial de fonction avec la possibilité de se mettre en pause et de reprendre plus tard, permettant à d'autres codes de s'exécuter entre-temps.

Le code décide qu'il doit attendre, il laisse donc s'exécuter un autre code «dans la file d'attente» et se réserve le droit de reprendre ses opérations «lorsque ce qu'il attend» est terminé.

Tout cela se fait avec un seul mot-clé simple:yield. Lorsqu'un générateur contient ce mot-clé, l'exécution est interrompue.

Un générateur peut contenir de nombreuxyieldmots-clés, s'arrêtant ainsi plusieurs fois, et il est identifié par le*functionà ne pas confondre avec l'opérateur de déréférence de pointeur utilisé dans les langages de programmation de niveau inférieur tels que C, C ++ ou Go.

Les générateurs permettent de nouveaux paradigmes de programmation en JavaScript, permettant:

  • Communication bidirectionnelle pendant le fonctionnement d'un générateur
  • longévitébouclesqui ne fige pas votre programme

Voici un exemple de générateur qui explique comment tout cela fonctionne.

function *calculator(input) {
    var doubleThat = 2 * (yield (input / 2))
    var another = yield (doubleThat)
    return (input * doubleThat * another)
}

On l'initialise avec

const calc = calculator(10)

Ensuite, nous démarrons l'itérateur sur notre générateur:

calc.next()

Cette première itération démarre l'itérateur. Le code renvoie cet objet:

{
  done: false
  value: 5
}

Ce qui se passe est: le code exécute la fonction, avecinput = 10tel qu'il a été passé dans le constructeur du générateur. Il court jusqu'à ce qu'il atteigne leyield, et renvoie le contenu deyield:input / 2 = 5. Nous avons donc obtenu une valeur de 5, et l'indication que l'itération n'est pas terminée (la fonction est simplement mise en pause).

Dans la deuxième itération, nous passons la valeur7:

calc.next(7)

et ce que nous avons obtenu est:

{
  done: false
  value: 14
}

7a été placé comme la valeur dedoubleThat. Important: vous pourriez lire commeinput / 2était l'argument, mais ce n'est que la valeur de retour de la première itération. Nous sautons maintenant cela et utilisons la nouvelle valeur d'entrée,7, and multiply it by 2.

On atteint alors le deuxième rendement, et ça revientdoubleThat, donc la valeur renvoyée est14.

In the next, and last, iteration, we pass in 100

calc.next(100)

et en retour nous avons

{
  done: true
  value: 14000
}

Au fur et à mesure de l'itération (plus de mots-clés de rendement trouvés) et nous retournons simplement(input * doubleThat * another)ce qui équivaut à10 * 14 * 100.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: