Generatori in JavaScript | Spiegato con esempi
JavaScript emette spesso soluzioni per vari problemi, in particolare con l'arrivo della versione ES6 di JavaScript. Una delle caratteristiche chiave introdotte in ES6 erano i generatori, i generatori in JavaScript vengono utilizzati con iteratori per creare un flusso di dati o un flusso di dati. I generatori ci aiutano a evitare problemi di funzione di callback.
Cosa sono effettivamente generatori
In parole semplici, i generatori sono funzioni speciali; A differenza delle normali funzioni che hanno solo un'istruzione di restituzione, i generatori restituiscono più valori ma in momenti diversi.
Per essere più descrittivi, i generatori sono funzioni che restituiscono il valore a metà della funzione e quindi interrompono l'esecuzione dopo aver salvato lo stato, questa fase di restituzione di un valore, salvare lo stato e fermare l'esecuzione viene chiamata cedere un valore e una pausa.
Durante questa pausa, il programma può funzionare su alcune altre funzionalità e poi quando siamo richiesti, al generatore viene chiesto di restituire il valore successivo, ma anziché riavviare l'intera funzione, il generatore funziona dal punto in cui si è fermato e produce il Valore successivo. Pertanto, creando un flusso costante di dati. Ecco perché queste funzioni sono chiamate "generatori" in quanto vengono utilizzate per generare il flusso di dati.
Possiamo esaminare i seguenti diagrammi di lavoro per comprendere meglio la differenza tra le funzioni normali e del generatore:
E la funzione del generatore funziona in questo modo:
Come definire una funzione del generatore?
Poiché le funzioni del generatore sono funzioni speciali ed è per questo che utilizziamo una parola chiave speciale durante la definizione "funzione*" - asterisco dopo la parola chiave della funzione. La sintassi è come:
funzione* functionname (params)// corpo della funzione
valore del rendimento;
'
Nota:
- Funzione*: parola chiave per definire le funzioni del generatore
- FunctionName: l'identificatore per questa funzione
- Parame: parametri opzionali che si desidera utilizzare
- Rendimento: restituisce il valore e interrompe l'esecuzione della funzione
Valore di ritorno: Oggetto [generatore] - un oggetto generatore O indefinito se il generatore è vuoto
Ora abbiamo familiarità con ciò che è una funzione del generatore, ma non abbiamo ancora familiarità con il suo tipo di ritorno che è "oggetto generatore".
Cos'è un oggetto generatore?
Quando viene creata una funzione del generatore, restituisce un oggetto che dobbiamo inizializzare in una variabile, questa variabile è quindi nota come oggetto generatore. Questo oggetto generatore viene utilizzato per ottenere il valore successivo dalla funzione.
Sintassi di inizializzare un oggetto generatore
variabile = generatorFunctionName (argomenti);Dopo aver creato l'oggetto generatore, è possibile utilizzare la funzione "oggetto.Prossimo()"
IL oggetto.Prossimo() Restituisce un oggetto JSON con due proprietà, uno è il "valore" e l'altro è il "Fatto" proprietà.
Ottenere valori da una funzione del generatore
Creiamo una semplice funzione del generatore che ci restituirà un nuovo valore ogni volta che viene chiamata, con le seguenti righe di codice:
generatore di funzioni()resa 1;
cedere "trovato";
resa 3;
Ora che abbiamo un generatore dobbiamo inizializzarlo con un oggetto generatore, lo facciamo con la seguente affermazione:
const genobject = generator ();Ora abbiamo anche l'oggetto generatore. Tutto quello che dobbiamo fare ora è chiamare il Prossimo() funzione dell'oggetto generatore e stampare l'oggetto JSON con il console.tronco d'albero() funzione.
console.registro (genobject.Prossimo());console.registro (genobject.Prossimo());
console.registro (genobject.Prossimo());
Lo snippet completo del codice sembra questo:
generatore di funzioni()resa 1;
cedere "trovato";
resa 3;
const genobject = generator ();
console.registro (genobject.Prossimo());
console.registro (genobject.Prossimo());
console.registro (genobject.Prossimo());
Otteniamo il seguente output:
Come puoi vedere, abbiamo stampato 3 diversi oggetti JSON con 3 diverse chiamate alla stessa funzione del generatore. Ma a volte vogliamo usare il valore, non l'oggetto JSON. Possiamo farlo accedendo al valore Proprietà dell'oggetto JSON con la seguente riga di codice:
console.registro (genobject.Prossimo().valore);console.registro (genobject.Prossimo().valore);
console.registro (genobject.Prossimo().valore);
Con queste righe, otteniamo il seguente output:
Come puoi vedere, il oggetto.Prossimo().valore ci restituisce un valore che possiamo persino passare ad un'altra funzione.
Funzionamento della funzione del generatore nell'esecuzione del codice simultaneo
Per questo tutorial, creiamo una semplice funzione del generatore che producerà numeri da 1 a 5 e dopo ogni numero che prendiamo dal generatore, il nostro programma ci avviserà che sta facendo alcuni calcoli su quel numero e ha lasciato la funzione del generatore.
Il primo passo è creare una funzione del generatore che producerà 5 numeri diversi su 5 diverse chiamate con le seguenti righe di codice:
generatore di funzioni()console.log ("funzione generatore inizializzato");
per (let i = 1; i <= 5; i++)
console.log ("Inside Generator per nuovo rendimento");
resa i;
Come puoi vedere, abbiamo creato un ciclo che restituirà 1 nuovo intero su ogni chiamata di rendimento del generatore e ci spingerà ogni volta che il programma è all'interno della funzione del generatore.
Ora, dobbiamo inizializzare questa funzione del generatore con l'oggetto generatore con la seguente riga di codice.
const genobject = generator ();Ora, abbiamo bisogno di una funzione che farà un po 'di lavoro sui valori ceduti, crea la funzione usando le seguenti righe:
Function TablePrinter (num)console.log ('Attualmente stampare la tabella di:' + num);
Abbiamo una funzione del generatore, un oggetto generatore e una funzione che funzionerà su alcuni valori che vengono passati al suo interno. Ora, tutto ciò di cui abbiamo bisogno è un iteratore che ripeterà attraverso l'oggetto generatore e passerà i valori alla funzione. Lo facciamo usando le seguenti righe di codice:
Valore ceduto = genobject.Prossimo().valore;while (cededValue)
TablePrinter (resedValue);
Valore ceduto = genobject.Prossimo().valore;
Ciò che questo codice farà è che prenderà il prossimo valore dal generatore e lo memorizzerà all'interno di una variabile. Quindi nel ciclo while, verificherà se la variabile non è definita o meno, e se non è indefinita, passerà questo valore alla funzione "tablepterinter " e passare al valore successivo.
Lo snippet completo del codice è come:
generatore di funzioni()console.log ("funzione generatore inizializzato");
per (let i = 1; i <= 5; i++)
console.log ("Inside Generator per nuovo rendimento");
resa i;
const genobject = generator ();
Function TablePrinter (num)
console.log ('Attualmente stampare la tabella di:' + num);
Valore ceduto = genobject.Prossimo().valore;
while (cededValue)
TablePrinter (resedValue);
Valore ceduto = genobject.Prossimo().valore;
L'output del seguente codice è:
Come puoi vedere, il programma va all'interno della funzione del generatore e produce un nuovo valore, salva gli stati, mettono in pausa l'esecuzione della funzione, entra all'interno del "tablepterinter " funzione ed esegue l'esecuzione lì. Una volta fatto, torna indietro all'interno della funzione del generatore per un nuovo rendimento. L'intero processo viene ripetuto fino a quando il generatore non continua a produrre nuovi rendimenti. Quindi, renderlo un flusso di dati.
Questo è tutto per i generatori in JavaScript.
Conclusione
I generatori sono funzioni speciali che possono fermare la loro esecuzione a metà strada per produrre un valore, salvare il loro stato e consentire al programma di svolgere altre attività. Se necessario la funzione del generatore "riprende " la loro esecuzione dallo stato in cui si sono fermati. I generatori vengono utilizzati per generare un flusso costante di dati. Sono utilizzati in collaborazione con promesse e iteratori per creare un flusso infinito di dati ed evitare problemi di funzione di callback.