JavaScript genrator generator

Gaby 2021-09-15 07:36:22
javascript genrator generator


It should be noted that when I was young, lingyunzhi , Once the best in the world .  Pay attention to prevent getting lost !   It is said that   give the thumbs-up + Collection == Learn to


generator (Generator) The concept of

ES6 Definition generator Standard guys learn from Python Of generator The concept and grammar of , If you are right about Python Of generator Familiar with , that ES6 Of generator Naturally .

Let's review the concept of function first . A function is a complete piece of code , To call a function is to pass in parameters , And then return the result :

function foo(x) {
return x + x;
}
var r = foo(1); // call foo function 
 Copy code 

Function in execution , If I don't meet return sentence ( If there is no at the end of the function return, It's implicit return undefined;), Control cannot be returned to the called code .

generator( generator ) yes ES6 New data types introduced by the standard . One generator It looks like a function , But you can go back many times . perform Generator The function returns an iterator object . That is to say ,Generator Function is a function that generates an iterator object .

1、ES6 Provides a solution to asynchronous programming
2、cenerator The number of is a state machine , It encapsulates data in different states
3、 Used to generate the traverser object
4、 Pause function ( Lazy evaluation ),yield Can pause ,next Method can start . Every time I return yield The result of the expression after

characteristic :

1、function There is an asterisk between and the function name
2、 For internal use yield Expressions to define different states
for example :

function* foo(){
let result = yield 'hello';// The status value is hello
yield 'generator';// The status value is generator
}
 Copy code 

3、generator The function returns a pointer object ( Press 11 In Chapter iterator), Instead of executing the internal logic of two numbers
4、 call next The internal logic of the method function begins to execute , encounter yield The expression stops , return {value:yield The expression after
5、 Call again next The method will start from the last stop yield Start at , Until the last
6、yield The return result of the statement is usually undefined, When calling next Method will be used as the start time yield sentence

Create generator (Generator)

The way functions are declared

generator It's like a function , The definition is as follows :

function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
 Copy code 

generator Unlike functions ,generator from function* Definition ( Pay attention to the extra * Number ), keyword  function  And   Function name   There is an asterisk between  *, also , except return sentence , You can also use yield Go back many times .

yield  Keywords can only be used in generators  generator  Use in a function , Otherwise, an error will be reported

The way function expressions

except Function declaration To create a generator ; also Function expression To create a generator :

let foo = function* (arr) {
for (let i = 0; i < arr.length; i++) {
yield arr[i];
}
}
let g = foo([1, 2, 3]);
console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 2, done: false}
console.log(g.next()); // {value: 3, done: false}
console.log(g.next()); // {value: undefined, done: true}
 Copy code 

This is an anonymous function expression , therefore * stay function Between keywords and parentheses

Be careful : You cannot create a generator through an arrow function , After all * I don't know where to write, do I

ES6 Shorthand for object methods

It can also be used. ES6 Object method to create a generator , Just add an asterisk before the function name *

let obj = {
* createIterator(arr) {
for (let i = 0; i < arr.length; i++) {
yield arr[i];
}
}
};
 Copy code 

generator (Generator) How to invoke

1. loop :

Here we will find , ordinary for Circulation and for..in Cycles are not appropriate , So use for..of loop Not traverse return Later

function* foo() {
yield "a";
yield "b";
return 'c';
}
let g1 = foo();
for (let val of g1) {
console.log(val); // a b
}
 Copy code 

2. deconstruction :( Not traverse return Later )

function* foo() {
yield "a";
yield "b";
return 'c';
};
let [g1, g2, g3] = foo();
console.log(g1, g2, g3); // a b undefined
 Copy code 

3. Extension operator :( Not traverse return Later )

function* show() {
yield "a";
yield "b";
return 'c';
};
let [...g1] = show();
console.log(g1); // ["a", "b"]
 Copy code 

4.Array.from():( Not traverse return Later )

function* show() {
yield "a";
yield "b";
return 'c';
};
let g1 = Array.from(show());
console.log(g1); // ["a", "b"]
 Copy code 

5. Object generator method :

The generator itself is a function , So it can be added to the object , The method of becoming an object

let obj = {
createIterator: function* (arr) {
for (let i = 0; i < arr.length; i++) {
yield arr[i];
}
}
};
let iterator = obj.createIterator([10, 20, 30]);
console.log(iterator.next()); // {value: 10, done: false}
console.log(iterator.next()); // {value: 20, done: false}
console.log(iterator.next()); // {value: 30, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
 Copy code 

generator Return multiple functions

generator Can return multiple times “ function ”? What's the use of returning multiple times ?

Let's take a famous Fibonacci sequence as an example , It consists of 0,1 start :

0 1 1 2 3 5 8 13 21 34 ...
 Copy code 

To write a function that produces a Fibonacci sequence , It can be written like this :

function fib(max) {
var
t,
a = 0,
b = 1,
arr = [0, 1];
while (arr.length < max) {
[a, b] = [b, a + b];
arr.push(b);
}
return arr;
}
// test :
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
 Copy code 

Function can only return once , So you have to return a Array. however , If replaced generator, You can return one number at a time , Go back and forth many times . use generator Rewrite as follows :

function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
 Copy code 

Try calling directly :

fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
 Copy code 

Call one directly generator Unlike calling a function ,fib(5) Just created a generator object , Haven't implemented it yet .

call generator There are two ways to object , One is to constantly call generator Object's next() Method :

var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}
 Copy code 

next() Method will execute generator Code for , then , Every encounter yield x; Just return an object {value: x, done: true/false}, then “ Pause ”. Back to value Namely yield The return value of ,done Express this generator Whether the execution is over . If done by true, be value Namely return The return value of .

When executed done by true when , This generator The object has been executed , Don't call on next() 了 .

The second method is to use for ... of Loop iteration generator object , This approach does not require our own judgment done

'use strict'
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
// adopt  `for`  loop , Batch processing  `yield`  sentence 
for (var x of fib(10)) {
console.log(x); // Output... In sequence 0, 1, 1, 2, 3, ...
}
 Copy code 

generator Compared with ordinary functions , What's the usage? ?

because generator You can return... Multiple times during execution , So it looks like a function that can remember the execution state , Take advantage of this , Write a generator You can realize the functions that can only be realized with object-oriented . for example , Use an object to save the State , That's how it's written :

var fib = {
a: 0,
b: 1,
n: 0,
max: 5,
next: function () {
var
r = this.a,
t = this.a + this.b;
this.a = this.b;
this.b = t;
if (this.n < this.max) {
this.n ++;
return r;
} else {
return undefined;
}
}
};
 Copy code 

Use the properties of the object to save the State , Quite complicated .

generator There is another great benefit , It is to change the asynchronous callback code into “ Sync ” Code . This benefit will have to be learned later AJAX Only later can we realize .

No, generator The dark ages before , use AJAX You need to write code like this :

ajax('http://url-1', data1, function (err, result) {
if (err) {
return handle(err);
}
ajax('http://url-2', data2, function (err, result) {
if (err) {
return handle(err);
}
ajax('http://url-3', data3, function (err, result) {
if (err) {
return handle(err);
}
return success(result);
});
});
});
 Copy code 

More callbacks , The more ugly the code is .

With generator A better time , use AJAX It can be written like this :

try {
r1 = yield ajax('http://url-1', data1);
r2 = yield ajax('http://url-2', data2);
r3 = yield ajax('http://url-3', data3);
success(r3);
}
catch (err) {
handle(err);
}
 Copy code 

Looks like synchronized code , The actual execution is asynchronous .

complete ajax  Request instance

function ajax(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
type: 'get',
success: resolve,
error: reject
});
});
}
function* show() {
yield ajax('https://jsonplacehouger.typicode.com/todos/1');
yield ajax('https://jsonplacehouger.typicode.com/todos/2');
yield ajax('https://jsonplacehouger.typicode.com/todos/3');
};
let g1 = show();
g1.next().value.then(res => {
console.log(res);
return g1.next().value;
}).then(res => {
console.log(res);
return g1.next().value;
}).then(res => {
console.log(res);
return g1.next().value;
});
 Copy code 

╭╮╱╭┳━━━┳╮╱╭╮
┃┃╱┃┃╭━╮┃┃╱┃┃
┃╰━╯┃┃┃┃┃╰━╯┃
╰━━╮┃┃┃┃┣━━╮┃
╱╱╱┃┃╰━╯┃╱╱┃┃

When you come, you can't go until you like it , It is said that give the thumbs-up + Collection == Learn to

版权声明
本文为[Gaby]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210909131415443E.html

  1. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  2. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  3. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  4. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  5. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  6. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  7. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  8. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  9. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  10. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  11. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  12. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  13. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  14. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  15. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  16. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  17. Basic knowledge of components in Vue "I"
  18. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  19. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  20. Want to know the implementation and application of single instance mode in the front end?
  21. Progressive react source code analysis - Implementation of ref API
  22. Webpack5 learning -- code compression
  23. Front and back end data interaction (V) -- what is Axios?
  24. Knowledge points related to react routing
  25. On demand introduction of react antd + customized theme
  26. GPG management submission signature verification
  27. [babylonjs] babylonjs practice (XII) -- drawing lane lines
  28. After brushing the 12 sliding windows, you can tear the front end by hand
  29. Vue fruit bookkeeping - money.vue component
  30. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  31. JS contains the function code
  32. Typescript record (I)
  33. Take you to learn more about nginx basic login authentication: generating passwords using OpenSSL
  34. Is componentization obsolete? Introduction to micro front end architecture
  35. Leetcode day 18
  36. Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing
  37. Design pattern -- agent pattern
  38. Vs Code theme recommendation in 2021
  39. Mon expérience réelle dans l'externalisation Android à Huawei, préparation de l'entrevue de développement Android
  40. J'ai les questions et les réponses d'entrevue de développement d'octets de rêve et Tencent double offer, Android
  41. Fatal Magic: countless sacrifices under gorgeous magic
  42. Mon expérience d'entrevue principale est partagée avec l'expérience d'apprentissage
  43. Mon expérience d'entrevue Android de Tencent partage, plugin Android
  44. Partage de questions d'entrevue Java à double saut d'octets non - premier cycle, un article vous apprend à gérer l'entrevue réseau informatique,
  45. Questions d'entrevue CSS (notes)
  46. Syntaxe de base de la classe
  47. Héritage de classe
  48. Mise en œuvre simple de 30 minutes pour un filtrage rapide des chaînes de tableau 10W +.
  49. Vue 3 tri des documents démarrage rapide
  50. Collection de code de base JavaScript (1)
  51. National secret nginx Container actual Fighting
  52. Quelques lignes de css pour rendre votre page tridimensionnelle
  53. C'est super détaillé, de "finir" ce 300 pages de 1000 questions d'entrevue,
  54. Take you in-depth understanding of nginx basic login authentication (including all configuration steps and in-depth analysis)
  55. Après avoir mangé, assurez - vous d'augmenter votre salaire de 5K et de rester debout tard pour trier les questions d'entrevue Java de millet.
  56. Résumé des questions d'entrevue pour les entreprises Internet nationales de première ligne, qui doivent être posées lors de l'entrevue d'emploi Java de la grande usine en 2021,
  57. "L'amour à première vue", la nouvelle BMW 2 coupe réelle, vous êtes surpris?
  58. Questions d'entrevue de test avancé de Dachang, liste des compétences de base de l'entrevue Java,
  59. Tableau 2D trié par un champ
  60. JS est souvent utilisé pour déterminer si l'objet est vide