In deze tutorial leert u aan de hand van voorbeelden over JavaScript-generatoren.
In JavaScript bieden generatoren een nieuwe manier om met functies en iteratoren te werken.
Met behulp van een generator
- u kunt de uitvoering van een functie overal binnen de functie stoppen
- en doorgaan met het uitvoeren van code vanuit een stilstaande positie
Maak JavaScript-generatoren
Om een generator te maken, moet u eerst een generatorfunctie met function*symbool definiëren . De objecten van generatorfuncties worden generatoren genoemd.
// define a generator function function* generator_function() (… ) // creating a generator const generator_obj = generator_function();
Opmerking : de generatorfunctie wordt aangeduid met *. U kunt ze gebruiken function* generatorFunc() (… )of function *generatorFunc()(… )om ze aan te maken.
Opbrengst gebruiken om de uitvoering te onderbreken
Zoals hierboven vermeld, kunt u de uitvoering van een generatorfunctie pauzeren zonder de hele functie-body uit te voeren. Daarvoor gebruiken we het yieldtrefwoord. Bijvoorbeeld,
// generator function function* generatorFunc() ( console.log("1. code before the first yield"); yield 100; console.log("2. code before the second yield"); yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next());
Uitvoer
1. code voor de eerste opbrengst (waarde: 100, klaar: onwaar)
Hier,
- Er wordt een generatorobject met de naam
generatorgemaakt. - Wanneer
generator.next()wordt aangeroepen, wordt de code tot aan de eersteyielduitgevoerd. Wanneeryieldwordt aangetroffen, retourneert het programma de waarde en pauzeert het de generatorfunctie.
Opmerking : u moet generatorobjecten aan een variabele toewijzen voordat u deze gebruikt.
Werken met meerdere opbrengstoverzichten
De yielduitdrukking geeft een waarde terug. In tegenstelling tot de returninstructie wordt het programma echter niet beëindigd. Daarom kun je doorgaan met het uitvoeren van code vanaf de laatst opgegeven positie. Bijvoorbeeld,
function* generatorFunc() ( console.log("1. code before first yield"); yield 100; console.log("2. code before the second yield"); yield 200; console.log("3. code after the second yield"); ) const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());
Uitvoer
1. code voor eerste opbrengst (waarde: 100, gedaan: onwaar) 2. code voor tweede opbrengst (waarde: 200, gedaan: onwaar) (waarde: ongedefinieerd, gedaan: waar)
Hier is hoe dit programma werkt.
- De eerste
generator.next()instructie voert de code uit tot aan de eerste opbrengstinstructie en pauzeert de uitvoering van het programma. - De tweede
generator.next()start het programma vanuit de gepauzeerde positie. - Wanneer alle elementen zijn benaderd, keert het terug (waarde: ongedefinieerd, gedaan: waar).
Werking van generatorfunctie in JavaScript
Argumenten doorgeven aan generatorfuncties
U kunt ook argumenten doorgeven aan een generatorfunctie. Bijvoorbeeld,
// generator function function* generatorFunc() ( // returns 'hello' at first next() let x = yield 'hello'; // returns passed argument on the second next() console.log(x); console.log('some code'); // returns 5 on second next() yield 5; ) const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next(6)); console.log(generator.next());
Uitvoer
(waarde: "hallo", gedaan: onwaar) 6 wat code (waarde: 5, gedaan: onwaar) (waarde: ongedefinieerd, gedaan: waar)
In het bovenstaande programma,
- De eerste
generator.next()retourneert de waarde van deyield(in dit geval 'hallo'). De waarde wordt echter niet toegewezen aan variabele x inlet x = yield 'hello';(waarde: "hallo", klaar: onwaar)
- Wanneer
generator.next(6)wordt aangetroffen, begint de code opnieuw bijlet x = yield 'hello';en wordt het argument 6 toegewezen aan x. Ook wordt de resterende code uitgevoerd tot op de secondeyield.6 een code (waarde: 5, gedaan: onwaar)
- Wanneer de derde
next()wordt uitgevoerd, keert het programma terug (waarde: ongedefinieerd, gedaan: waar). Het is omdat er geen andere opbrengstverklaringen zijn.(waarde: ongedefinieerd, gedaan: waar)
Generatoren worden gebruikt voor het implementeren van iterables
Generatoren bieden een eenvoudigere manier om iteratoren te implementeren.
Als u een iterator handmatig wilt implementeren, moet u een iterator maken met de next()methode en de staat opslaan. Bijvoorbeeld,
// creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) for (const i of iterableObj) ( console.log(i); )
Uitvoer
1 2 3
Aangezien generatoren iterables zijn, kunt u een iterator op een eenvoudigere manier implementeren. Vervolgens kunt u de generatoren doorlopen met behulp van de for… oflus. Bijvoorbeeld,
// generator function function* generatorFunc() ( yield 1; yield 2; yield 3; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Generator methoden
| Methode | Omschrijving |
|---|---|
next() | Retourneert een opbrengstwaarde |
return() | Retourneert een waarde en beëindigt de generator |
throw() | Geeft een foutmelding en beëindigt de generator |
JavaScript retourneert Vs opbrengst trefwoord
| terug trefwoord | opbrengst trefwoord |
|---|---|
| Retourneert de waarde en beëindigt de functie. | Retourneert de waarde en stopt de functie, maar beëindigt de functie niet. |
| Beschikbaar in zowel de normale functies als de generatorfuncties. | Alleen beschikbaar in generatorfuncties. |
JavaScript-generatorfunctie Met terugkeer
You can use the return statement in a generator function. The return statement returns a value and terminates the function (similar to regular functions). For example,
// generator function function* generatorFunc() ( yield 100; return 123; console.log("2. some code before second yield"); yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());
Output
(value: 100, done: false) (value: 123, done: true) (value: undefined, done: true)
In the above program, when the return statement is encountered, it returns the value and done property becomes true, and the function terminates. Hence, the next() method after the return statement does not return anything.
Note: You can also use the return() method instead of the return statement like generator.return(123); in the above code.
JavaScript Generator Throw Method
U kunt expliciet een fout in de generatorfunctie genereren met behulp van de methode throw (). Het gebruik van throw()methode genereert een fout en beëindigt de functie. Bijvoorbeeld,
// generator function function* generatorFunc() ( yield 100; yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next()); // throws an error // terminates the generator console.log(generator.throw(new Error('Error occurred.'))); console.log(generator.next());
Uitvoer
(waarde: 1, gedaan: onwaar) Fout: er is een fout opgetreden.
Gebruik van generatoren
- Met generatoren kunnen we schonere code schrijven tijdens het schrijven van asynchrone taken.
- Generatoren bieden een eenvoudigere manier om iteratoren te implementeren.
- Generatoren voeren de code alleen uit als dat nodig is.
- Generatoren zijn geheugenefficiënt.
Generatoren werden geïntroduceerd in ES6 . Sommige browsers ondersteunen het gebruik van generatoren mogelijk niet. Ga voor meer informatie naar Ondersteuning voor JavaScript-generatoren.
