Generatori JavaScript

In questo tutorial imparerai a conoscere i generatori JavaScript con l'aiuto di esempi.

In JavaScript, i generatori forniscono un nuovo modo di lavorare con funzioni e iteratori.

Utilizzando un generatore,

  • puoi interrompere l'esecuzione di una funzione da qualsiasi punto all'interno della funzione
  • e continuare a eseguire il codice da una posizione di arresto

Crea generatori JavaScript

Per creare un generatore, è necessario prima definire una funzione generatore con il function*simbolo. Gli oggetti delle funzioni del generatore sono chiamati generatori.

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

Nota : la funzione del generatore è indicata da *. Puoi usarli function* generatorFunc() (… )o function *generatorFunc()(… )crearli.

Utilizzo di yield per sospendere l'esecuzione

Come accennato in precedenza, è possibile sospendere l'esecuzione di una funzione del generatore senza eseguire l'intero corpo della funzione. Per questo, usiamo la yieldparola chiave. Per esempio,

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

Produzione

 1. codice prima del primo rendimento (valore: 100, fatto: falso)

Qui,

  • Viene generatorcreato un oggetto generatore denominato .
  • Quando generator.next()viene chiamato, yieldviene eseguito il codice fino al primo . Quando yieldviene rilevato, il programma restituisce il valore e sospende la funzione del generatore.

Nota : è necessario assegnare oggetti generatore a una variabile prima di utilizzarla.

Lavorazione di più dichiarazioni di rendimento

L' yieldespressione restituisce un valore. Tuttavia, a differenza returndell'istruzione, non termina il programma. Ecco perché puoi continuare a eseguire il codice dall'ultima posizione resa. Per esempio,

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

Produzione

 1. codice prima del primo rendimento (valore: 100, fatto: falso) 2. codice prima del secondo rendimento (valore: 200, fatto: falso) (valore: undefined, fatto: vero)

Ecco come funziona questo programma.

  • La prima generator.next()istruzione esegue il codice fino alla prima istruzione yield e sospende l'esecuzione del programma.
  • Il secondo generator.next()avvia il programma dalla posizione di pausa.
  • Quando si accede a tutti gli elementi, restituisce (value: undefined, done: true).
Funzionamento della funzione generatore in JavaScript

Passaggio di argomenti alle funzioni del generatore

Puoi anche passare argomenti a una funzione di generatore. Per esempio,

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

Produzione

 (valore: "ciao", fatto: falso) 6 codice (valore: 5, fatto: falso) (valore: undefined, fatto: vero)

Nel programma sopra,

  • Il primo generator.next()restituisce il valore di yield(in questo caso, 'ciao'). Tuttavia, il valore non è assegnato alla variabile x inlet x = yield 'hello'; 
     (valore: "ciao", fatto: falso)
  • Quando generator.next(6)viene incontrato, il codice ricomincia da let x = yield 'hello';e l'argomento 6 viene assegnato a x. Inoltre, il codice rimanente viene eseguito fino al secondo yield. 
     6 codice (valore: 5, fatto: falso)
  • Quando il terzo next()viene eseguito, il programma restituisce (valore: undefined, done: true). È perché non ci sono altre dichiarazioni di rendimento. 
     (valore: undefined, done: true)

I generatori vengono utilizzati per implementare gli iterabili

I generatori forniscono un modo più semplice per implementare gli iteratori.

Se vuoi implementare un iteratore manualmente, devi creare un iteratore con il next()metodo e salvare lo stato. Per esempio,

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

Produzione

 1 2 3

Poiché i generatori sono iterabili, è possibile implementare un iteratore in un modo più semplice. Quindi puoi scorrere i generatori usando il for… ofciclo. Per esempio,

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

Metodi del generatore

Metodo Descrizione
next() Restituisce un valore di rendimento
return() Restituisce un valore e termina il generatore
throw() Genera un errore e termina il generatore

JavaScript return vs yield parola chiave

parola chiave di ritorno parola chiave di rendimento
Restituisce il valore e termina la funzione. Restituisce il valore e arresta la funzione ma non termina la funzione.
Disponibile sia nelle funzioni normali che in quelle del generatore. Disponibile solo nelle funzioni generatore.

Funzione generatore JavaScript con ritorno

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

Puoi generare esplicitamente un errore sulla funzione del generatore utilizzando il metodo throw (). L'uso del throw()metodo genera un errore e termina la funzione. Per esempio,

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

Produzione

 (valore: 1, fatto: falso) Errore: si è verificato un errore.

Usi dei generatori

  • I generatori ci consentono di scrivere codice più pulito durante la scrittura di attività asincrone.
  • I generatori forniscono un modo più semplice per implementare gli iteratori.
  • I generatori eseguono il codice solo quando richiesto.
  • I generatori sono efficienti in termini di memoria.

I generatori sono stati introdotti in ES6 . Alcuni browser potrebbero non supportare l'uso dei generatori. Per saperne di più, visita il supporto di JavaScript Generators.

Articoli interessanti...