Générateurs et itérateurs ES6: Guide d'un développeur

ES6 a introduit de nombreuses nouvelles fonctionnalités dans la langue javascript. Deux de ces fonctionnalités, générateurs et itérateurs, ont considérablement changé la façon dont nous écrivons des fonctions spécifiques dans un code frontal plus complexe.

Bien qu'ils travaillent bien ensemble, leurs fonctions réelles peuvent être un peu déroutantes, alors regardons de plus près.

points clés

• ES6 fournit un moyen plus propre d'écrire pour les boucles, offrant un moyen plus de type Python d'interagir directement avec les éléments de l'ensemble de données, ce qui rend le code plus facile à lire et à écrire.
• Le générateur dans ES6 est une fonction qui se souvient de l'état entre chaque appel. Ils peuvent générer la valeur suivante dans la séquence chaque fois qu'ils sont appelés, créant efficacement des itérations personnalisées.
• Le mot-clé "rendement" dans la fonction du générateur est similaire à "retour", mais il maintient l'état de la fonction, lui permettant de continuer à exécuter à partir de l'interruption de l'appel suivant.
• Bien que le nœud et les navigateurs modernes prennent en charge les fonctionnalités ES6, les navigateurs plus anciens peuvent nécessiter des traducteurs tels que Babel pour convertir le code ES6 en code ECMAScript 5.

iterator

L'itération est une pratique courante dans la programmation, généralement utilisée pour parcourir un ensemble de valeurs, convertir chaque valeur ou l'utiliser ou l'enregistrer d'une manière ultérieure pour une utilisation ultérieure.

En JavaScript, nous avons toujours eu une telle boucle:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

mais es6 nous donne une autre option:

for (const i of foo) {
  // 对i执行某些操作
}

C'est sans doute plus concis et plus facile à utiliser, me rappelant des langues comme Python et Ruby. Cependant, il y a une autre chose très importante à noter sur cette nouvelle itération: elle vous permet d'interagir directement avec les éléments de l'ensemble de données.

Supposons que nous voulons savoir si chaque numéro dans le tableau est un nombre premier. Nous pouvons le faire en créant une fonction qui fait cela. Cela pourrait ressembler à ceci:

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

pas le meilleur du monde, mais cela fonctionne. L'étape suivante consiste à parcourir notre liste de nombres et à vérifier si chaque numéro est premier en utilisant notre nouvelle fonction brillante. C'est très simple:

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes现在是[73, 19]

Encore une fois, cela fonctionne, mais c'est maladroit, et cette maladroite dépend en grande partie de la façon dont JavaScript gère les boucles. Cependant, avec ES6, nous obtenons une option presque python dans le nouvel itérateur. Par conséquent, le précédent pour Loop peut être écrit comme ceci:

const possiblePrimes = [73, 6, 90, 19, 15];
const confirmedPrimes = [];

for (const i of possiblePrimes){
   if ( isPrime(i) ){
      confirmedPrimes.push(i);
   }
}

// confirmedPrimes现在是[73, 19]

C'est beaucoup plus propre, mais la chose la plus frappante est la boucle. La variable I représente maintenant l'élément réel dans un tableau nommé PossiblePrimes. Par conséquent, nous n'avons plus besoin de l'appeler par index. Cela signifie que nous n'avons pas à appeler des prix possibles [i] dans la boucle, mais il suffit d'appeler i.

Dans les coulisses, cette itération tire parti de la méthode Shiny Symbol.iterator () d'Es6. Cette méthode est responsable de la description de l'itération et lorsqu'elle est appelée, renvoie un objet JavaScript contenant la valeur suivante dans la boucle et une clé DID, ce qui est vrai ou faux selon que la boucle est terminée.

Si vous êtes intéressé par ce détail, vous pouvez lire ce merveilleux article de blog "Iterators Gonna Iterate" de Jake Archibald. Alors que nous fouillons dans une autre partie de cet article: le générateur, cela vous donne également une bonne idée de ce qui se passe dans les coulisses.

générateur

Le générateur (également connu sous le nom de "Iter Factory") est un nouveau type de fonction JavaScript utilisée pour créer des itérations spécifiques. Ils vous fournissent un moyen spécial et personnalisé de faire un peu de contenu.

D'accord, alors qu'est-ce que cela signifie? Regardons un exemple. Supposons que nous voulons une fonction, et chaque fois que nous l'appelons, nous recevrons le prochain numéro de premier ordre:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

Si vous êtes habitué à JavaScript, certains de ces trucs ressemblent un peu à la sorcellerie, mais ce n'est pas trop mal en réalité. Nous avons cet astérisque étrange après la fonction du mot-clé, mais cela indique simplement à JavaScript que nous définissons un générateur.

Une autre partie étrange est le mot clé de rendement. C'est en fait ce que le générateur crache lorsque vous l'appelez. Il est à peu près équivalent à revenir, mais il conserve l'état de la fonction au lieu de tout relancer chaque fois qu'il est appelé. Il "rappelle" son emplacement au moment de l'exécution, donc la prochaine fois que vous l'appelez, il continue à partir de l'interruption.

Cela signifie que nous pouvons faire ceci:

for (const i of foo) {
  // 对i执行某些操作
}

Ensuite, chaque fois que nous voulons obtenir - vous l'avez deviné - le prochain numéro de premier ordre, nous pouvons appeler NextPrime:

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

Vous pouvez également appeler NextPrime.Next (), ce qui est utile lorsque votre générateur n'est pas infini, car il renvoie un objet comme celui-ci:

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes现在是[73, 19]

Ici, la touche Done vous indique si la fonction a terminé sa tâche. Dans notre cas, notre fonction ne se termine jamais, ce qui nous donne théoriquement tous les nombres premiers jusqu'à l'infini (si nous avons autant de mémoire informatique).

C'est cool, alors puis-je utiliser des générateurs et des itérateurs maintenant?

Bien que l'ECMAScript 2015 soit terminé et existe depuis de nombreuses années, la prise en charge du navigateur pour ses fonctionnalités (en particulier les générateurs) est loin d'être parfaite. Si vous souhaitez vraiment les utiliser et d'autres fonctionnalités modernes, vous pouvez consulter des traducteurs comme Babel et Traceur qui convertiront votre code ECMAScript 2015 en code ECMAScript 5 équivalent (si possible).

Il existe également de nombreux éditeurs en ligne qui prennent en charge Ecmascript 2015, ou se concentrent spécifiquement sur celui-ci, en particulier le régénérateur de Facebook et JS Bin. Si vous voulez simplement jouer et apprendre comment JavaScript est écrit maintenant, cela vaut la peine.

Conclusion

Les générateurs et les itérateurs offrent une grande flexibilité pour notre approche des problèmes JavaScript. Les itérateurs nous permettent d'écrire pour des boucles d'une manière plus semblable à un python, ce qui signifie que notre code semble plus propre et plus facile à lire.

Les fonctions du générateur nous permettent d'écrire des fonctions qui se souviennent où elles ont été vues pour la dernière fois et peuvent continuer l'exécution à partir de l'interruption. Ils peuvent également être infinis en termes de ce dont ils se souviennent réellement, ce qui est très pratique dans certains cas.

Le support de ces générateurs et itérateurs est bon. Ils sont pris en charge dans le nœud et dans tous les navigateurs modernes, à l'exception de Internet Explorer. Si vous devez prendre en charge les navigateurs plus anciens, la meilleure façon est d'utiliser un traducteur comme Babel.

FAQ sur les générateurs et itérateurs ECMAScript 2015 (FAQ)

Quelle est la différence entre les itérateurs et les générateurs dans ECMAScript 2015?

Les itérateurs et les générateurs sont tous deux des caractéristiques d'ECMAScript 2015 et sont utilisés pour traiter les flux de données. Un itérateur est un objet qui permet au programmeur d'itérer à travers tous les éléments d'une collection. Il a une méthode suivante () qui renvoie l'élément suivant dans la séquence. D'un autre côté, le générateur est une fonction qui peut s'arrêter à mi-chemin, puis continuer à partir de l'arrêt. En d'autres termes, le générateur ressemble à une fonction, mais il se comporte comme un itérateur.

Comment utiliser le mot clé de rendement dans ECMAScript 2015?

Le mot clé de rendement est utilisé pour les fonctions ECMAScript 2015 Pause et restauration des fonctions du générateur (fonction * ou héritage des générateurs). Le rendement peut renvoyer une valeur de la fonction du générateur. Cette valeur de retour est généralement un objet avec deux propriétés: valeur et fait. L'attribut de valeur est le résultat du calcul de l'expression du rendement, et fait une valeur booléenne indiquant si le générateur a généré sa dernière valeur.

Quel est le but de la méthode suivante () dans ECMAScript 2015?

La méthode suivante () est un élément clé du protocole Iterator dans ECMAScript 2015. Il renvoie un objet avec deux propriétés: valeur et fait. L'attribut de valeur est la prochaine valeur de la séquence d'itération, et fait une valeur booléenne indiquant si l'itération est terminée. Si cela est vrai, l'itérateur a dépassé la fin de la séquence d'itération.

Comment utiliser des générateurs pour la programmation asynchrone dans ECMAScript 2015?

Le générateur d'ECMascript 2015 peut être utilisé pour simplifier la programmation asynchrone. Ils peuvent être utilisés pour bloquer l'exécution pour attendre que l'opération asynchrone se termine sans bloquer l'ensemble du programme. Cela peut rendre le code asynchrone et se comporter davantage comme un code synchrone, ce qui est plus facile à comprendre et à raisonner.

Quelle est la différence entre pour… de Loop et pour… en boucle dans ECMAScript 2015?

Le pour… de la boucle dans Ecmascript 2015 est utilisé pour faire boucler à travers des objets itérables tels que des tableaux, des chaînes, des cartes, des collections, etc. Il appelle des crochets itératifs personnalisés à l'aide d'instructions qui seront exécutées pour la valeur de chaque attribut différent. D'un autre côté, la boucle pour… en boucle est utilisée pour traverser les propriétés d'un objet. Il renvoie une liste des clés pour l'objet itéré.

Comment créer un itérateur personnalisé dans ECMAScript 2015?

Dans ECMAScript 2015, vous pouvez créer un itérateur personnalisé en définissant un objet avec la méthode suivante (). Cette méthode doit renvoyer un objet avec deux propriétés: valeur et réalisée. L'attribut de valeur est la prochaine valeur de la séquence d'itération, et fait une valeur booléenne indiquant si l'itération est terminée.

Quel est le rôle de Symbol.iterator dans ECMAScript 2015?

Symbol.iterator est un symbole intégré spécial dans ECMAScript 2015. Il est utilisé pour spécifier l'itérateur par défaut pour l'objet. Lorsqu'un objet doit être itéré (par exemple au début d'un pour… de Loop), sa méthode @@ iterator sera appelée sans aucun argument, et l'itérateur retourné sera utilisé pour obtenir la valeur à itérer.

Pouvez-vous fournir un exemple de fonctions générateurs dans ECMAScript 2015?

Bien sûr, il s'agit d'un exemple simple des fonctions du générateur dans ECMAScript 2015:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

Dans cet exemple, la fonction IDMaker est un générateur qui produit une séquence de nombres.

Comment utiliser la méthode et le générateur Throw () dans ECMAScript 2015?

La méthode Throw () dans ECMAScript 2015 peut être utilisée dans le générateur pour restaurer l'exécution de la fonction du générateur et lancer une erreur de l'expression du rendement. La méthode Throw () peut être utilisée pour gérer les erreurs qui se produisent lors de l'exécution de la fonction du générateur.

Quelle est la signification de l'attribut Done dans l'itérateur ECMAScript 2015?

La propriété

Done est une valeur booléenne renvoyée par l'itérateur dans ECMAScript 2015. Il indique si l'itérateur a plus de valeurs à retourner. Si cela est vrai, l'itérateur a dépassé la fin de la séquence d'itération. Si fait est faux, l'itérateur peut toujours générer plus de valeurs.

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!