Générateurs en JavaScript expliqués

May 05 2023
En JavaScript, une fonction génératrice est un type particulier de fonction qui peut être mise en pause et reprise pendant l'exécution. Cela signifie qu'un générateur peut produire plusieurs valeurs au fil du temps, plutôt que de simplement renvoyer une valeur unique comme une fonction régulière.

En JavaScript, une fonction génératrice est un type particulier de fonction qui peut être mise en pause et reprise pendant l'exécution. Cela signifie qu'un générateur peut produire plusieurs valeurs au fil du temps, plutôt que de simplement renvoyer une valeur unique comme une fonction régulière.

Les fonctions de générateur sont déclarées en utilisant la syntaxe function* (ou l'ancienne syntaxe avec le mot clé function suivi du mot generator entre parenthèses). Lorsqu'une fonction génératrice est appelée, elle ne commence pas à s'exécuter immédiatement. Au lieu de cela, il renvoie un objet itérateur qui peut être utilisé pour contrôler l'exécution du générateur.

Voici un exemple de fonction générateur simple :

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

Pour utiliser le générateur, nous créons d'abord un objet itérateur en appelant la fonction du générateur :

const iterator = generateSequence();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Lorsque le générateur a fini de produire des valeurs, il renvoie automatiquement { value : undefined, done : true }.

Les générateurs peuvent également recevoir des valeurs d'entrée de l'appelant à l'aide du mot clé yield. Voici un exemple de générateur qui reçoit une valeur de départ et génère une séquence de valeurs qui sont le double de la valeur précédente :

function* generateDoubles(start) {
  let current = start;
  while (true) {
    yield current;
    current *= 2;
  }
}

const iterator = generateDoubles(1);

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: 8, done: false }

Les générateurs sont souvent utilisés pour implémenter des itérateurs pour des structures de données personnalisées. Voici un exemple de générateur qui itère sur les clés d'un objet :

const myObject = { a: 1, b: 2, c: 3 };

function* generateKeys(obj) {
  for (let key in obj) {
    yield key;
  }
}

const iterator = generateKeys(myObject);
console.log(iterator.next()); // { value: "a", done: false }
console.log(iterator.next()); // { value: "b", done: false }
console.log(iterator.next()); // { value: "c", done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Les générateurs peuvent également être utilisés pour implémenter une évaluation paresseuse, où les valeurs ne sont calculées que lorsqu'elles sont réellement nécessaires. Voici un exemple de générateur qui génère des nombres premiers à la demande :

function* generatePrimes() {
  let current = 2;
  while (true) {
    if (isPrime(current)) {
      yield current;
    }
    current++;
  }
}

function isPrime(num) {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num !== 1;
}

const iterator = generatePrimes();
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 7, done: false }
console.log(iterator.next()); // { value: 11, done: false }

Les générateurs peuvent également être utilisés pour implémenter la programmation asynchrone en utilisant la syntaxe async/wait. Voici un exemple de fonction générateur qui simule une opération asynchrone dont l'exécution prend un temps variable :

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function* generateAsyncValues() {
  let count = 0;
  while (true) {
    await sleep(1000);
    yield count++;
  }
}

(async () => {
  const iterator = generateAsyncValues();
  console.log(await iterator.next()); // { value: 0, done: false }
  console.log(await iterator.next()); // { value: 1, done: false }
  console.log(await iterator.next()); // { value: 2, done: false }
  console.log(await iterator.next()); // { value: 3, done: false }
})();

En résumé, les générateurs en JavaScript sont un outil puissant pour implémenter des itérateurs, une évaluation paresseuse et une programmation asynchrone. Ils permettent aux fonctions de générer plusieurs valeurs au fil du temps et peuvent être interrompues et reprises pendant l'exécution. En utilisant des générateurs, les développeurs peuvent écrire un code plus efficace, flexible et lisible.

Merci d'avoir lu!

J'espère que vous avez trouvé cet article utile. Si vous avez des questions ou des suggestions, veuillez laisser des commentaires. Vos commentaires m'aident à m'améliorer.

N'oubliez pas de vous abonner⭐️

Page Facebook :https://www.facebook.com/designTechWorld1

Page Instagram :https://www.instagram.com/techd.esign/

Chaîne Youtube :https://www.youtube.com/@tech..Design/

Gazouillement :https://twitter.com/sumit_singh2311

Matériel utilisé :

Ordinateur portable :https://amzn.to/3yKkzaC

Montre:https://amzn.to/41cialm

Vous pouvez préférer React Book : https://amzn.to/3Tw29nx

Quelques livres supplémentaires liés au langage de programmation :

https://amzn.to/3z3tW5s

https://amzn.to/40n4m6O

https://amzn.to/3Jzstse

https://amzn.to/3nbl8aE

* Avis de non-responsabilité important — "Amazon et le logo Amazon sont des marques commerciales d'Amazon.com, Inc. ou de ses sociétés affiliées."