JavaScript-generatorer

I den här handledningen lär du dig om JavaScript-generatorer med hjälp av exempel.

I JavaScript erbjuder generatorer ett nytt sätt att arbeta med funktioner och iteratorer.

Med hjälp av en generator,

  • du kan stoppa körningen av en funktion var som helst i funktionen
  • och fortsätt att köra kod från en stoppad position

Skapa JavaScript-generatorer

För att skapa en generator måste du först definiera en generatorfunktion med function*symbol. Objekten för generatorfunktioner kallas generatorer.

 // define a generator function function* generator_function() (… ) // creating a generator const generator_obj = generator_function();

Obs! Generatorfunktionen betecknas med *. Du kan antingen använda function* generatorFunc() (… )eller function *generatorFunc()(… )skapa dem.

Använda avkastning för att pausa utförandet

Som nämnts ovan kan du pausa körningen av en generatorfunktion utan att utföra hela funktionskroppen. För det använder vi yieldnyckelordet. Till exempel,

 // 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());

Produktion

 1. kod före första avkastningen (värde: 100, gjort: falskt)

Här,

  • Ett genererat objekt med namnet generatorskapas.
  • När det generator.next()anropas yieldkörs koden fram till den första . När det yieldpåträffas returnerar programmet värdet och pausar generatorfunktionen.

Obs! Du måste tilldela generatorobjekt till en variabel innan du använder den.

Arbeta med flera avkastningsuttalanden

Det yielduttrycket returnerar ett värde. Men till skillnad från returnuttalandet avslutar det inte programmet. Det är därför du kan fortsätta att köra kod från den senast givna positionen. Till exempel,

 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());

Produktion

 1. kod före första avkastning (värde: 100, gjort: falskt) 2. kod före andra avkastning (värde: 200, gjort: falskt) (värde: odefinierad, gjort: sann)

Så här fungerar det här programmet.

  • Det första generator.next()uttalandet kör koden fram till det första avkastningsuttalandet och pausar körningen av programmet.
  • Den andra generator.next()startar programmet från pausläget.
  • När alla element är åtkomliga returnerar den (värde: odefinierad, klar: sann).
Arbeta med generatorfunktion i JavaScript

Vidarebefordra argument till generatorfunktioner

Du kan också skicka argument till en generatorfunktion. Till exempel,

 // 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());

Produktion

 (värde: "hej", gjort: falsk) 6 någon kod (värde: 5, gjort: falsk) (värde: odefinierad, klar: sann)

I ovanstående program,

  • Den första generator.next()returnerar värdet på yield(i det här fallet 'hej'). Värdet tilldelas dock inte variabeln x inlet x = yield 'hello'; 
     (värde: "hej", gjort: falskt)
  • När man generator.next(6)stöter på börjar koden igen kl let x = yield 'hello';och argumentet 6 tilldelas x. Återstående kod körs också fram till den andra yield. 
     6 någon kod (värde: 5, gjort: falskt)
  • När det tredje next()körs återgår programmet (värde: odefinierat, gjort: sant). Det beror på att det inte finns några andra avkastningsuttalanden. 
     (värde: odefinierat, gjort: sant)

Generatorer används för att implementera Iterables

Generatorer är ett enklare sätt att implementera iteratorer.

Om du vill implementera en iterator manuellt måste du skapa en iterator med next()metoden och spara tillståndet. Till exempel,

 // 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); )

Produktion

 1 2 3

Eftersom generatorer är iterabla kan du implementera en iterator på ett enklare sätt. Då kan du iterera genom generatorerna med for… ofslingan. Till exempel,

 // generator function function* generatorFunc() ( yield 1; yield 2; yield 3; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )

Generatormetoder

Metod Beskrivning
next() Returnerar ett avkastningsvärde
return() Returnerar ett värde och avslutar generatorn
throw() Kastar ett fel och avslutar generatorn

JavaScript returnerar Vs ger nyckelord

returnera nyckelord ge nyckelord
Returnerar värdet och avslutar funktionen. Returnerar värdet och stoppar funktionen men avslutar inte funktionen.
Finns i både de vanliga funktionerna och generatorfunktionerna. Finns endast i generatorfunktioner.

JavaScript-generatorfunktion med retur

Du kan använda returnuttalandet i en generatorfunktion. Det returnuttalandet returnerar ett värde och avslutar funktionen (liknande vanliga funktioner). Till exempel,

 // 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());

Produktion

 (värde: 100, gjort: falskt) (värde: 123, gjort: sant) (värde: odefinierat, gjort: sant)

I ovanstående program, när returnuttalandet påträffas, returnerar det värdet och doneegenskapen blir true, och funktionen avslutas. Därför returnerar next()metoden efter returnuttalandet inget.

Obs! Du kan också använda return()metoden istället för returnuttalandet som generator.return(123);i ovanstående kod.

JavaScript Generator Throw Method

Du kan uttryckligen kasta ett fel på generatorfunktionen med hjälp av throw () -metoden. Användningen av throw()metoden ger ett fel och avslutar funktionen. Till exempel,

 // 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());

Produktion

 (värde: 1, gjort: falskt) Fel: Fel inträffade.

Användning av generatorer

  • Generatorer låter oss skriva renare kod medan vi skriver asynkrona uppgifter.
  • Generatorer är ett enklare sätt att implementera iteratorer.
  • Generatorer kör endast sin kod när det krävs.
  • Generatorer är minneseffektiva.

Generatorer introducerades i ES6 . Vissa webbläsare stöder kanske inte användningen av generatorer. För mer information, besök JavaScript Generators support.

Intressanta artiklar...