En JavaScript, qu'est-ce qu'une fonction génératrice ? Qu'est ce que ça fait?


⭐ Introduction de la colonne

Parcours d'entrée front-end : explorez le monde merveilleux du développement Web Bienvenue dans le parcours d'entrée front-end ! Si vous êtes intéressé, vous pouvez vous abonner à cette chronique ! Cette chronique est faite sur mesure pour ceux qui s'intéressent au développement Web et qui viennent d'entrer dans le domaine du front-end. Que vous soyez un novice complet ou un développeur possédant des connaissances de base, vous disposerez ici d'une plateforme d'apprentissage systématique et conviviale. Dans cette rubrique, nous la mettrons à jour quotidiennement sous forme de questions et réponses, vous présentant des points de connaissances front-end sélectionnés et des réponses aux questions fréquemment posées. Grâce au format questions-réponses, nous espérons répondre plus directement aux questions des lecteurs sur la technologie front-end et aider chacun à établir progressivement une base solide. Qu'il s'agisse de HTML, CSS, JavaScript ou de divers frameworks et outils courants, nous expliquerons les concepts d'une manière simple et facile à comprendre, et fournirons des exemples et des exercices pratiques pour consolider ce que vous avez appris. Dans le même temps, nous partagerons également quelques conseils pratiques et bonnes pratiques pour vous aider à mieux comprendre et appliquer diverses technologies dans le développement front-end.

Insérer la description de l'image ici

De plus, nous lancerons également régulièrement des didacticiels pratiques sur les projets afin que vous puissiez appliquer les connaissances que vous avez acquises au développement réel. Grâce à la pratique de projets réels, vous serez en mesure de mieux comprendre le flux de travail et la méthodologie du développement front-end, et de développer votre propre capacité à résoudre des problèmes et à vous développer de manière indépendante. Nous pensons que ce n'est que par une accumulation et une pratique continues que nous pourrons véritablement maîtriser la technologie de développement front-end. Alors, préparez-vous à relever le défi et lancez-vous courageusement dans ce voyage d’entrée frontale ! Que vous recherchiez un changement de carrière, une amélioration de vos compétences ou la satisfaction de vos intérêts personnels, nous nous engageons à vous fournir les meilleures ressources et le meilleur soutien d'apprentissage. Explorons ensemble le monde merveilleux du développement Web ! Rejoignez le parcours d'entrée front-end et devenez un développeur front-end exceptionnel ! Commençons le voyage frontal . L'image ci-dessous présente d'autres colonnes que le blogueur publie en plus de cette colonne ; (ignorez l'image ci-dessous et commençons le texte d'aujourd'hui !!!)

Insérer la description de l'image ici


⭐ Aperçu des fonctions du générateur

Les fonctions de générateur sont un type spécial de fonction en JavaScript défini function*à l'aide de la syntaxe. L’objectif principal des fonctions génératrices est de créer des séquences itérables et évaluées paresseusement. Ils vous permettent de générer des valeurs de manière incrémentielle, ainsi que de suspendre et de reprendre l'exécution tout en générant des valeurs.

La fonction génératrice est appelée via l'objet générateur (Generator Object), et un nouvel objet générateur est renvoyé à chaque fois que la fonction génératrice est appelée. Les objets générateurs disposent d'un pointeur interne qui suit l'état d'exécution dans les fonctions du générateur.

Les fonctions du générateur utilisent deux nouveaux mots-clés pour contrôler le flux d'exécution : yieldet yield*. Ce faisant yield, vous pouvez produire une valeur et suspendre l'exécution de la fonction génératrice, puis reprendre l'exécution plus tard. Grâce à yield*, vous pouvez passer le contrôle à une autre fonction du générateur.

⭐Le rôle de la fonction générateur

Les fonctions du générateur ont les rôles principaux suivants :

  1. Chargement paresseux des données : les fonctions du générateur vous permettent de générer des données à la demande plutôt que d'un seul coup. Ceci est utile pour les grands ensembles de données ou les données dont le calcul prend du temps.

  2. Programmation asynchrone : les fonctions du générateur peuvent être utilisées pour écrire du code asynchrone plus lisible, en particulier async/awaitlorsqu'elles sont combinées avec . Vous pouvez utiliser des opérations asynchrones pour yieldsuspendre l'exécution, puis reprendre l'exécution une fois l'opération terminée.

  3. Gestion des états : les fonctions du générateur peuvent vous aider à gérer des machines à états complexes, car elles peuvent faire une pause et basculer entre différents états.

  4. Séquences infinies : les fonctions du générateur peuvent être utilisées pour générer des séquences infinies, telles que des séquences de nombres naturels ou la séquence de Fibonacci.

Voici un exemple de fonction génératrice qui montre comment créer un générateur simple d'une séquence infinie de nombres naturels :

function* naturalNumbers() {
    
    
  let n = 1;
  while (true) {
    
    
    yield n;
    n++;
  }
}

const generator = naturalNumbers();

console.log(generator.next().value); // 输出 1
console.log(generator.next().value); // 输出 2
console.log(generator.next().value); // 输出 3
// ...

Dans cet exemple, naturalNumbersla fonction génératrice crée une séquence infiniment croissante de nombres naturels, generator.next()renvoyant le nombre naturel suivant à chaque fois qu'elle est appelée.

Les fonctions de générateur sont des outils puissants et flexibles en JavaScript, particulièrement adaptés à la gestion des situations dans lesquelles vous devez générer des données à la demande ou gérer un état complexe. Dans JavaScript moderne, ils sont async/awaitutilisés conjointement pour améliorer la lisibilité et la maintenabilité de la programmation asynchrone.


⭐Écrivez à la fin

Cette rubrique convient à un large éventail de lecteurs et convient aux débutants en front-end ; ou à ceux qui n'ont pas appris le front-end et sont intéressés par le front-end, ou aux étudiants en back-end qui souhaitent mieux se montrer et se développer. quelques points de connaissances front-end pendant le processus d'entretien, donc si vous avez les bases du front-end et suivez cette rubrique, cela peut également vous aider dans une large mesure à trouver et à combler les lacunes. sortie, s'il y a des défauts dans l'article, vous pouvez me contacter via le côté gauche de la page d'accueil. , avançons ensemble, et en même temps, je recommande également plusieurs chroniques à tout le monde. Les partenaires intéressés peuvent s'abonner : De plus aux colonnes ci-dessous, vous pouvez également vous rendre sur ma page d'accueil pour voir d'autres colonnes ;

Jeux front-end (gratuits) Cette rubrique vous emmènera dans un monde plein de créativité et de plaisir. En utilisant les connaissances de base de HTML, CSS et JavaScript, nous construirons ensemble divers jeux de pages intéressants. Que vous soyez débutant ou que vous ayez une certaine expérience en développement front-end, cette chronique est faite pour vous. Nous commencerons par les bases et vous guiderons à travers les compétences dont vous avez besoin pour créer un jeu de pages. A travers des cas pratiques et des exercices, vous apprendrez à utiliser HTML pour construire la structure des pages, à utiliser CSS pour embellir l'interface du jeu et à utiliser JavaScript pour ajouter des effets interactifs et dynamiques au jeu. Dans cette colonne, nous aborderons différents types de mini-jeux, notamment les jeux de labyrinthe, le casse-briques, le serpent, le dragueur de mines, les calculatrices, les batailles d'avions, le tic-tac-toe, les puzzles, les labyrinthes et bien plus encore. Chaque projet vous guide tout au long du processus de construction en étapes concises et claires, avec des explications détaillées et des exemples de code. Dans le même temps, nous partagerons également quelques conseils d’optimisation et bonnes pratiques pour vous aider à améliorer les performances des pages et l’expérience utilisateur. Que vous recherchiez un projet intéressant pour exercer vos compétences front-end, ou que vous soyez intéressé par le développement de jeux de pages, la rubrique jeux front-end sera votre meilleur choix. Cliquez pour vous abonner à la rubrique des jeux front-end

Insérer la description de l'image ici

Tutoriel Transparent Vue3 [De zéro à un] (Payant) Bienvenue dans le didacticiel Transparent Vue3 ! Cette chronique vise à fournir à chacun des connaissances techniques complètes liées à Vue3. Si vous avez une certaine expérience de Vue2, cette colonne peut vous aider à maîtriser les concepts de base et l'utilisation de Vue3. Nous partirons de zéro et vous guiderons étape par étape pour créer une application Vue complète. A travers des cas pratiques et des exercices, vous apprendrez à utiliser la syntaxe des modèles de Vue3, le développement de composants, la gestion des états, le routage et d'autres fonctions. Nous présenterons également certaines fonctionnalités avancées, telles que l'API Composition et Teleport, pour vous aider à mieux comprendre et appliquer les nouvelles fonctionnalités de Vue3. Dans cette colonne, nous vous guiderons à travers chaque projet en étapes concises et claires, avec des explications détaillées et des exemples de code. Dans le même temps, nous partagerons également certains problèmes et solutions courants dans le développement de Vue3 pour vous aider à surmonter les difficultés et à améliorer l'efficacité du développement. Que vous souhaitiez apprendre Vue3 en profondeur ou que vous ayez besoin d'un guide complet pour créer un projet front-end, la colonne de didacticiels approfondis de Vue3 deviendra une ressource indispensable pour vous. Cliquez pour vous abonner à la colonne Tutoriel Transparent Vue3 [De zéro à un]

Insérer la description de l'image ici

Le guide de démarrage de TypeScript (gratuit) est une colonne conçue pour vous aider à démarrer rapidement et à maîtriser les technologies liées à TypeScript. Grâce à un langage concis et clair et à des exemples de code riches, nous expliquerons en profondeur les concepts de base, la syntaxe et les fonctionnalités de TypeScript. Que vous soyez débutant ou développeur expérimenté, vous trouverez ici un parcours d'apprentissage qui vous convient. Des fonctionnalités de base telles que les annotations de type, les interfaces et les classes au développement modulaire, à la configuration des outils et à l'intégration avec des frameworks frontaux courants, nous couvrirons de manière exhaustive tous les aspects. En lisant cette colonne, vous pourrez améliorer la fiabilité et la maintenabilité du code JavaScript, et fournir une meilleure qualité de code et une meilleure efficacité de développement pour vos projets. Embarquons ensemble dans ce voyage TypeScript passionnant et stimulant ! Cliquez pour vous abonner à la colonne Guide de démarrage de TypeScript

Insérer la description de l'image ici

Je suppose que tu aimes

Origine blog.csdn.net/JHXL_/article/details/133631691
conseillé
Classement