JavaScript-Generatoren

In diesem Tutorial lernen Sie anhand von Beispielen JavaScript-Generatoren kennen.

In JavaScript bieten Generatoren eine neue Möglichkeit, mit Funktionen und Iteratoren zu arbeiten.

Mit einem Generator,

  • Sie können die Ausführung einer Funktion von einer beliebigen Stelle innerhalb der Funktion aus stoppen
  • und weiterhin Code von einer angehaltenen Position aus ausführen

Erstellen Sie JavaScript-Generatoren

Um einen Generator zu erstellen, müssen Sie zunächst eine Generatorfunktion mit function*Symbol definieren. Die Objekte von Generatorfunktionen werden Generatoren genannt.

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

Hinweis : Die Generatorfunktion ist mit gekennzeichnet *. Sie können sie entweder verwenden function* generatorFunc() (… )oder function *generatorFunc()(… )erstellen.

Verwenden Sie Yield, um die Ausführung anzuhalten

Wie oben erwähnt, können Sie die Ausführung einer Generatorfunktion anhalten, ohne den gesamten Funktionskörper auszuführen. Dafür verwenden wir das yieldSchlüsselwort. Beispielsweise,

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

Ausgabe

 1. Code vor der ersten Ausbeute (Wert: 100, erledigt: falsch)

Hier,

  • Ein Generatorobjekt mit dem Namen generatorwird erstellt.
  • Beim generator.next()Aufruf wird der Code bis zum ersten yieldausgeführt. Wenn dies yieldauftritt, gibt das Programm den Wert zurück und pausiert die Generatorfunktion.

Hinweis : Sie müssen einer Variablen Generatorobjekte zuweisen, bevor Sie sie verwenden.

Arbeiten mit mehreren Ertragserklärungen

Der yieldAusdruck gibt einen Wert zurück. Im Gegensatz zur returnAnweisung wird das Programm jedoch nicht beendet. Aus diesem Grund können Sie den Code ab der zuletzt angegebenen Position weiter ausführen. Beispielsweise,

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

Ausgabe

 1. Code vor der ersten Ausbeute (Wert: 100, erledigt: falsch) 2. Code vor der zweiten Ausbeute (Wert: 200, erledigt: falsch) (Wert: undefiniert, erledigt: wahr)

So funktioniert dieses Programm.

  • Die erste generator.next()Anweisung führt den Code bis zur ersten Yield-Anweisung aus und unterbricht die Ausführung des Programms.
  • Der zweite generator.next()startet das Programm aus der angehaltenen Position.
  • Wenn auf alle Elemente zugegriffen wird, wird zurückgegeben (Wert: undefiniert, erledigt: wahr).
Funktion der Generatorfunktion in JavaScript

Übergeben von Argumenten an Generatorfunktionen

Sie können Argumente auch an eine Generatorfunktion übergeben. Beispielsweise,

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

Ausgabe

 (Wert: "Hallo", erledigt: falsch) 6 Code (Wert: 5, erledigt: falsch) (Wert: undefiniert, erledigt: wahr)

Im obigen Programm

  • Der erste generator.next()gibt den Wert von yield(in diesem Fall 'Hallo') zurück. Der Wert wird jedoch nicht der Variablen x in zugewiesenlet x = yield 'hello'; 
     (Wert: "Hallo", erledigt: falsch)
  • Wenn generator.next(6)angetroffen wird, beginnt der Code erneut bei let x = yield 'hello';und das Argument 6 wird x zugewiesen. Außerdem wird der verbleibende Code bis zur Sekunde ausgeführt yield. 
     6 etwas Code (Wert: 5, erledigt: falsch)
  • Wenn der dritte next()ausgeführt wird, gibt das Programm zurück (Wert: undefiniert, erledigt: wahr). Dies liegt daran, dass es keine anderen Ertragsangaben gibt. 
     (Wert: undefiniert, erledigt: wahr)

Generatoren werden zur Implementierung von Iterables verwendet

Generatoren bieten eine einfachere Möglichkeit, Iteratoren zu implementieren.

Wenn Sie einen Iterator manuell implementieren möchten, müssen Sie mit der next()Methode einen Iterator erstellen und den Status speichern. Beispielsweise,

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

Ausgabe

 1 2 3

Da Generatoren iterabel sind, können Sie einen Iterator auf einfachere Weise implementieren. Anschließend können Sie die Generatoren mithilfe der for… ofSchleife durchlaufen . Beispielsweise,

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

Generatormethoden

Methode Beschreibung
next() Gibt einen Ertragswert zurück
return() Gibt einen Wert zurück und beendet den Generator
throw() Wirft einen Fehler und beendet den Generator

JavaScript-Rückgabe Vs Ausbeute Schlüsselwort

Schlüsselwort zurückgeben Ausbeute Schlüsselwort
Gibt den Wert zurück und beendet die Funktion. Gibt den Wert zurück und hält die Funktion an, beendet die Funktion jedoch nicht.
Verfügbar sowohl in den normalen Funktionen als auch in den Generatorfunktionen. Nur in Generatorfunktionen verfügbar.

JavaScript Generator Funktion Mit Rückgabe

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

Mit der throw () -Methode können Sie explizit einen Fehler in der Generatorfunktion auslösen. Die Verwendung der throw()Methode löst einen Fehler aus und beendet die Funktion. Beispielsweise,

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

Ausgabe

 (Wert: 1, erledigt: falsch) Fehler: Fehler aufgetreten.

Verwendung von Generatoren

  • Mit Generatoren können wir saubereren Code schreiben, während wir asynchrone Aufgaben schreiben.
  • Generatoren bieten eine einfachere Möglichkeit, Iteratoren zu implementieren.
  • Generatoren führen ihren Code nur bei Bedarf aus.
  • Generatoren sind speichereffizient.

Generatoren wurden in ES6 eingeführt . Einige Browser unterstützen möglicherweise nicht die Verwendung von Generatoren. Weitere Informationen finden Sie unter Unterstützung von JavaScript-Generatoren.

Interessante Beiträge...