Rendimento de JavaScript

Resumo : neste tutorial, você aprenderá sobre a yieldpalavra-chave JavaScript e como usá-la em funções geradoras.

Introdução à yieldpalavra-chave JavaScript

A yieldpalavra-chave permite pausar e retomar uma função geradorafunction* ( ).

O seguinte mostra a sintaxe da yieldpalavra-chave:

[variable_name] = yield [expression];
Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe:

• Especifica o expressionvalor a ser retornado de uma função geradora por meio do protocolo de iteração. Se você omitir o expression, o yieldretorno será undefined.
• Armazena variable_nameo valor opcional passado para o next()método do objeto iterador.

yieldExemplos de JavaScript

Vejamos alguns exemplos de uso da yieldpalavra-chave.

A) Retornando um valor

O exemplo trivial a seguir ilustra como usar a yieldpalavra-chave para retornar um valor de uma função geradora:

function* foo() { 
    yield 1;
    yield 2;
    yield 3;
}

let f = foo();

console.log(f.next());
Linguagem de código:  JavaScript  ( javascript )

Saída:

{ value: 1, done: false }
Linguagem de código:  CSS  ( css )

Como você pode ver, o valor a seguir yieldé adicionado à valuepropriedade do objeto de retorno quando the next()é chamado:

yield 1;
Linguagem de código:  JavaScript  ( javascript )

B) Retornandoundefined

Este exemplo ilustra como usar a yieldpalavra-chave para retornar undefined:

function* bar() {
    yield;
}

let b = bar();
console.log(b.next()); 
Linguagem de código:  JavaScript  ( javascript )

Saída:

{ value: undefined, done: false }
Linguagem de código:  CSS  ( css )

C) Passando um valor para o next()método

No exemplo a seguir, a yieldpalavra-chave é uma expressão que avalia o argumento passado ao next()método:

function* generate() {
    let result = yield;
    console.log(`result is ${result}`);
}

let g = generate();
console.log(g.next()); 

console.log(g.next(1000));
Linguagem de código:  JavaScript  ( javascript )

A primeira chamada g.next()retorna o seguinte objeto:

{ value: undefined, done: false }
Linguagem de código:  CSS  ( css )

A segunda chamada g.next() realiza as seguintes tarefas:

• Avalie yieldpara 1000.
• Atribua resulto valor de yield, que é 1000.
• Envie a mensagem e retorne o objeto

Saída:

result is 1000
{ value: undefined, done: true }
Linguagem de código:  CSS  ( css )

D) Usando yieldem um array

O exemplo a seguir usa a yieldpalavra-chave como elementos de um array :

function* baz() {
    let arr = [yield, yield];
    console.log(arr);
}

var z = baz();

console.log(z.next());  
console.log(z.next(1)); 
console.log(z.next(2));
Linguagem de código:  JavaScript  ( javascript )

A primeira chamada z.next()define o primeiro elemento do arrarray como 1 e retorna o seguinte objeto:

{ value: undefined, done: false }
Linguagem de código:  CSS  ( css )

A segunda chamada z.next()define o segundo do arrarray como 2 e retorna o seguinte objeto:

{ value: undefined, done: false }
Linguagem de código:  CSS  ( css )

A terceira chamada z.next()mostra o conteúdo do arrarray e retorna o seguinte objeto:

[ 1, 2 ]
{ value: undefined, done: true }
Linguagem de código:  CSS  ( css )

E) Usando yieldpara retornar um array

A seguinte função geradora usa a yieldpalavra-chave para retornar um array:

function* yieldArray() {
    yield 1;
    yield [ 20, 30, 40 ];
}

let y = yieldArray();

console.log(y.next()); 
console.log(y.next()); 
console.log(y.next());
Linguagem de código:  JavaScript  ( javascript )

A primeira chamada y.next()retorna o seguinte objeto:

{ value: 1, done: false }
Linguagem de código:  CSS  ( css )

A segunda chamada y.next()retorna o seguinte objeto:

{ value: [ 20, 30, 40 ], done: false }
Linguagem de código:  CSS  ( css )

Neste caso, yielddefine o array [ 20, 30, 40 ]como o valor da valuepropriedade do objeto de retorno.

A terceira chamada y.next()retorna o seguinte objeto:

{ value: undefined, done: true }
Linguagem de código:  CSS  ( css )

F) Usando o yieldpara retornar elementos individuais de um array

Veja a seguinte função geradora:

function* yieldArrayElements() {
    yield 1;
    yield* [ 20, 30, 40 ];
}

let a = yieldArrayElements();

console.log(a.next()); // { value: 1, done: false }
console.log(a.next()); // { value: 20, done: false }
console.log(a.next()); // { value: 30, done: false }
console.log(a.next()); // { value: 40, done: false }
Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, yield*é a nova sintaxe. A yield*expressão é usada para delegar para outro objeto ou gerador iterável.

Como resultado, a seguinte expressão retorna os elementos individuais do array [20, 30, 40]:

yield* [20, 30, 40];
Linguagem de código:  JavaScript  ( javascript )

Neste tutorial, você aprendeu sobre a yieldpalavra-chave JavaScript e como usá-la em geradores de funções.