Generadores de JavaScript

En este tutorial, aprenderá sobre los generadores de JavaScript con la ayuda de ejemplos.

En JavaScript, los generadores proporcionan una nueva forma de trabajar con funciones e iteradores.

Usando un generador,

  • puede detener la ejecución de una función desde cualquier lugar dentro de la función
  • y continuar ejecutando código desde una posición detenida

Crear generadores de JavaScript

Para crear un generador, primero debe definir una función de generador con function*símbolo. Los objetos de las funciones generadoras se denominan generadores.

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

Nota : La función del generador se indica mediante *. Puede usarlos function* generatorFunc() (… )o function *generatorFunc()(… )crearlos.

Usar rendimiento para pausar la ejecución

Como se mencionó anteriormente, puede pausar la ejecución de una función generadora sin ejecutar todo el cuerpo de la función. Para eso, usamos la yieldpalabra clave. Por ejemplo,

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

Salida

 1. código antes del primer rendimiento (valor: 100, hecho: falso)

Aquí,

  • Se generatorcrea un objeto generador con nombre .
  • Cuando generator.next()se llama, yieldse ejecuta el código hasta el primero . Cuando yieldse encuentra, el programa devuelve el valor y pausa la función del generador.

Nota : Debe asignar objetos de generador a una variable antes de usarla.

Trabajo de múltiples declaraciones de rendimiento

La yieldexpresión devuelve un valor. Sin embargo, a diferencia de la returndeclaración, no finaliza el programa. Es por eso que puede continuar ejecutando código desde la última posición cedida. Por ejemplo,

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

Salida

 1. código antes del primer rendimiento (valor: 100, hecho: falso) 2. código antes del segundo rendimiento (valor: 200, hecho: falso) (valor: indefinido, hecho: verdadero)

Así es como funciona este programa.

  • La primera generator.next()declaración ejecuta el código hasta la primera declaración de rendimiento y pausa la ejecución del programa.
  • El segundo generator.next()inicia el programa desde la posición de pausa.
  • Cuando se accede a todos los elementos, devuelve (valor: indefinido, hecho: verdadero).
Funcionamiento de la función de generador en JavaScript

Pasar argumentos a funciones generadoras

También puede pasar argumentos a una función generadora. Por ejemplo,

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

Salida

 (valor: "hola", hecho: falso) 6 algún código (valor: 5, hecho: falso) (valor: indefinido, hecho: verdadero)

En el programa anterior,

  • El primero generator.next()devuelve el valor de yield(en este caso, 'hola'). Sin embargo, el valor no se asigna a la variable x enlet x = yield 'hello'; 
     (valor: "hola", hecho: falso)
  • Cuando generator.next(6)se encuentra, el código comienza de nuevo en let x = yield 'hello';y el argumento 6 se asigna ax. Además, el código restante se ejecuta hasta el segundo yield. 
     6 algún código (valor: 5, hecho: falso)
  • Cuando next()se ejecuta el tercero , el programa regresa (valor: indefinido, hecho: verdadero). Es porque no hay otras declaraciones de rendimiento. 
     (valor: indefinido, hecho: verdadero)

Los generadores se utilizan para implementar iterables

Los generadores proporcionan una forma más sencilla de implementar iteradores.

Si desea implementar un iterador manualmente, debe crear un iterador con el next()método y guardar el estado. Por ejemplo,

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

Salida

 1 2 3

Dado que los generadores son iterables, puede implementar un iterador de una manera más sencilla. Luego puede iterar a través de los generadores usando el for… ofbucle. Por ejemplo,

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

Métodos de generador

Método Descripción
next() Devuelve un valor de rendimiento
return() Devuelve un valor y finaliza el generador.
throw() Lanza un error y termina el generador

Retorno de JavaScript Vs palabra clave de rendimiento

volver palabra clave rendimiento palabra clave
Devuelve el valor y finaliza la función. Devuelve el valor y detiene la función, pero no la termina.
Disponible tanto en las funciones normales como en las funciones del generador. Disponible solo en funciones de generador.

Función de generador de JavaScript con retorno

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

Puede lanzar explícitamente un error en la función del generador usando el método throw (). El uso del throw()método arroja un error y finaliza la función. Por ejemplo,

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

Salida

 (valor: 1, hecho: falso) Error: se produjo un error.

Usos de generadores

  • Los generadores nos permiten escribir código más limpio mientras escribimos tareas asincrónicas.
  • Los generadores proporcionan una forma más sencilla de implementar iteradores.
  • Los generadores ejecutan su código solo cuando es necesario.
  • Los generadores son eficientes en memoria.

Los generadores se introdujeron en ES6 . Es posible que algunos navegadores no admitan el uso de generadores. Para obtener más información, visite Soporte de generadores de JavaScript.

Articulos interesantes...