Geradores de JavaScript

Neste tutorial, você aprenderá sobre geradores de JavaScript com a ajuda de exemplos.

Em JavaScript, os geradores fornecem uma nova maneira de trabalhar com funções e iteradores.

Usando um gerador,

  • você pode parar a execução de uma função de qualquer lugar dentro da função
  • e continuar executando o código de uma posição interrompida

Crie geradores de JavaScript

Para criar um gerador, você precisa primeiro definir uma função de gerador com function*símbolo. Os objetos de funções geradoras são chamados de geradores.

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

Nota : A função do gerador é denotada por *. Você pode usar function* generatorFunc() (… )ou function *generatorFunc()(… )para criá-los.

Usando o rendimento para pausar a execução

Conforme mencionado acima, você pode pausar a execução de uma função do gerador sem executar todo o corpo da função. Para isso, usamos a yieldpalavra - chave. Por exemplo,

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

Resultado

 1. código antes do primeiro rendimento (valor: 100, feito: falso)

Aqui,

  • Um objeto gerador denominado generatoré criado.
  • Quando generator.next()é chamado, o código até o primeiro yieldé executado. Quando yieldé encontrado, o programa retorna o valor e pausa a função do gerador.

Nota : Você precisa atribuir objetos gerador a uma variável antes de usá-la.

Trabalho de múltiplas declarações de rendimento

A yieldexpressão retorna um valor. No entanto, ao contrário da returninstrução, ela não encerra o programa. É por isso que você pode continuar executando o código a partir da última posição produzida. Por exemplo,

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

Resultado

 1. código antes do primeiro rendimento (valor: 100, feito: falso) 2. código antes do segundo rendimento (valor: 200, feito: falso) (valor: indefinido, feito: verdadeiro)

Veja como funciona este programa.

  • A primeira generator.next()instrução executa o código até a primeira instrução de rendimento e pausa a execução do programa.
  • O segundo generator.next()inicia o programa a partir da posição de pausa.
  • Quando todos os elementos são acessados, ele retorna (valor: undefined, done: true).
Trabalho da função do gerador em JavaScript

Passando Argumentos para Funções Geradoras

Você também pode passar argumentos para uma função geradora. Por exemplo,

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

Resultado

 (valor: "hello", done: false) 6 algum código (value: 5, done: false) (value: undefined, done: true)

No programa acima,

  • O primeiro generator.next()retorna o valor de yield(neste caso, 'hello'). No entanto, o valor não é atribuído à variável x emlet x = yield 'hello'; 
     (valor: "olá", feito: falso)
  • Quando generator.next(6)é encontrado, o código começa novamente em let x = yield 'hello';e o argumento 6 é atribuído a x. Além disso, o código restante é executado até o segundo yield. 
     6 algum código (valor: 5, feito: falso)
  • Quando o terceiro next()é executado, o programa retorna (valor: undefined, done: true). É porque não existem outras declarações de rendimento. 
     (valor: indefinido, feito: verdadeiro)

Geradores são usados ​​para implementar iteráveis

Os geradores fornecem uma maneira mais fácil de implementar iteradores.

Se você deseja implementar um iterador manualmente, deve criar um iterador com o next()método e salvar o estado. Por exemplo,

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

Resultado

 1 2 3

Como os geradores são iteráveis, você pode implementar um iterador de uma maneira mais fácil. Em seguida, você pode iterar pelos geradores usando o for… ofloop. Por exemplo,

 // 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 Geradores

Método Descrição
next() Retorna um valor de rendimento
return() Retorna um valor e encerra o gerador
throw() Lança um erro e encerra o gerador

JavaScript return Vs yield Palavra-chave

retornar palavra-chave rendimento palavra-chave
Retorna o valor e encerra a função. Retorna o valor e interrompe a função, mas não a encerra.
Disponível nas funções normais e nas funções do gerador. Disponível apenas em funções de gerador.

Função de gerador de JavaScript com 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

Você pode lançar explicitamente um erro na função do gerador usando o método throw (). O uso do throw()método gera um erro e encerra a função. Por exemplo,

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

Resultado

 (valor: 1, feito: falso) Erro: ocorreu um erro.

Usos de geradores

  • Os geradores nos permitem escrever um código mais limpo enquanto escrevemos tarefas assíncronas.
  • Os geradores fornecem uma maneira mais fácil de implementar iteradores.
  • Os geradores executam seu código apenas quando necessário.
  • Os geradores são eficientes em termos de memória.

Os geradores foram introduzidos no ES6 . Alguns navegadores podem não suportar o uso de geradores. Para saber mais, visite o suporte de Geradores de JavaScript.

Artigos interessantes...