Generatory JavaScript

W tym samouczku dowiesz się o generatorach JavaScript przy pomocy przykładów.

W JavaScript generatory zapewniają nowy sposób pracy z funkcjami i iteratorami.

Korzystanie z generatora,

  • możesz zatrzymać wykonywanie funkcji z dowolnego miejsca wewnątrz funkcji
  • i kontynuuj wykonywanie kodu z pozycji zatrzymania

Twórz generatory JavaScript

Aby utworzyć generator, musisz najpierw zdefiniować funkcję generatora za pomocą function*symbolu. Obiekty funkcji generatorów nazywane są generatorami.

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

Uwaga : Funkcja generatora jest oznaczona przez *. Możesz ich użyć function* generatorFunc() (… )lub, function *generatorFunc()(… )aby je utworzyć.

Korzystanie z yield do wstrzymania wykonywania

Jak wspomniano powyżej, można wstrzymać wykonywanie funkcji generatora bez wykonywania całej treści funkcji. W tym celu używamy yieldsłowa kluczowego. Na przykład,

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

Wynik

 1. kod przed pierwszym zyskiem (wartość: 100, gotowe: fałsz)

Tutaj,

  • Zostanie generatorutworzony obiekt generatora o nazwie .
  • Kiedy generator.next()jest wywoływana, wykonywany jest kod aż do pierwszego yield. Po yieldnapotkaniu program zwraca wartość i wstrzymuje działanie generatora.

Uwaga : Musisz przypisać obiekty generatora do zmiennej przed jej użyciem.

Praca z wieloma zestawieniami zysków

yieldWyrażenie zwraca wartość. Jednak w przeciwieństwie do returninstrukcji nie powoduje zakończenia programu. Dlatego możesz kontynuować wykonywanie kodu od ostatniej uzyskanej pozycji. Na przykład,

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

Wynik

 1. kod przed pierwszym zyskiem (wartość: 100, gotowe: fałsz) 2. kod przed drugim zyskiem (wartość: 200, gotowe: fałsz) (wartość: nieokreślona, ​​zrobione: prawda)

Oto jak działa ten program.

  • Pierwsza generator.next()instrukcja wykonuje kod aż do pierwszej instrukcji yield i wstrzymuje wykonywanie programu.
  • Drugi generator.next()uruchamia program od pozycji wstrzymanej.
  • Kiedy wszystkie elementy są dostępne, zwraca (wartość: undefined, done: true).
Działanie funkcji generatora w JavaScript

Przekazywanie argumentów do funkcji generatora

Możesz także przekazywać argumenty do funkcji generatora. Na przykład,

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

Wynik

 (wartość: "witaj", gotowe: fałsz) 6 jakiś kod (wartość: 5, gotowe: fałsz) (wartość: nieokreślona, ​​zrobione: prawda)

W powyższym programie

  • Pierwsza generator.next()zwraca wartość yield(w tym przypadku „hello”). Jednak wartość nie jest przypisana do zmiennej x inlet x = yield 'hello'; 
     (wartość: „cześć”, gotowe: fałsz)
  • Po generator.next(6)napotkaniu kod ponownie zaczyna się od, let x = yield 'hello';a argument 6 jest przypisywany do x. Ponadto pozostały kod jest wykonywany co do sekundy yield. 
     6 jakiś kod (wartość: 5, gotowe: fałsz)
  • Po wykonaniu trzeciego next()program zwraca (wartość: undefined, done: true). Dzieje się tak, ponieważ nie ma innych instrukcji dotyczących wydajności. 
     (wartość: undefined, done: true)

Generatory są używane do implementacji Iterables

Generatory zapewniają łatwiejszy sposób implementacji iteratorów.

Jeśli chcesz zaimplementować iterator ręcznie, musisz utworzyć iterator z next()metodą i zapisać stan. Na przykład,

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

Wynik

 1 2 3

Ponieważ generatory są iterowalne, możesz zaimplementować iterator w łatwiejszy sposób. Następnie możesz iterować przez generatory za pomocą for… ofpętli. Na przykład,

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

Metody generatora

metoda Opis
next() Zwraca wartość zysku
return() Zwraca wartość i kończy działanie generatora
throw() Zgłasza błąd i kończy działanie generatora

Zwrot kodu JavaScript w porównaniu do słowa kluczowego

return Keyword słowo kluczowe yield
Zwraca wartość i kończy funkcję. Zwraca wartość i zatrzymuje funkcję, ale nie kończy funkcji.
Dostępne zarówno w funkcji normalnej, jak i funkcji generatora. Dostępne tylko w funkcjach generatora.

Funkcja generatora JavaScript z funkcją powrotu

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

Możesz jawnie zgłosić błąd do funkcji generatora za pomocą metody throw (). Użycie throw()metody generuje błąd i kończy działanie funkcji. Na przykład,

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

Wynik

 (wartość: 1, wykonane: fałsz) Błąd: wystąpił błąd.

Zastosowania generatorów

  • Generatory pozwalają nam pisać czystszy kod podczas pisania zadań asynchronicznych.
  • Generatory zapewniają łatwiejszy sposób implementacji iteratorów.
  • Generatory wykonują swój kod tylko wtedy, gdy jest to wymagane.
  • Generatory wydajnie wykorzystują pamięć.

Generatory zostały wprowadzone w ES6 . Niektóre przeglądarki mogą nie obsługiwać generatorów. Aby dowiedzieć się więcej, odwiedź stronę pomocy technicznej generatorów JavaScript.

Interesujące artykuły...