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.
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.
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).
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.
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.
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.
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.
Comment utiliser des générateurs pour la programmation asynchrone dans ECMAScript 2015?
Quelle est la différence entre pour… de Loop et pour… en boucle dans ECMAScript 2015?
Comment créer un itérateur personnalisé dans ECMAScript 2015?
Quel est le rôle de Symbol.iterator 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.
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.
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!
Qu'est-ce qu'un fichier .Xauthority ?
Quel est le format de fichier mkv ?
Mon ordinateur ne peut pas l'ouvrir en double-cliquant dessus.
Introduction aux raisons pour lesquelles le bureau à distance ne peut pas se connecter
Comment exécuter Python dans vscode
Comment résoudre les caractères chinois tronqués devc
Comparez les similitudes et les différences entre deux colonnes de données dans Excel
La différence entre tas et pile
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
