ES 6 Series ix: Generator

“Code Tailor “provides technology related information and a series of basic articles for front-end developers. Follow the wechat public account” Rookie of Xiaohe Mountain “to get the latest articles.

preface

Before we start, we want to let you know that this article is a summary of the chapter “Generator” in ECMAScript6 by Yifong Nguyen. If you already know the following, you can skip this section and get to the topic

• What is a Generator?
• How to create and use it?
• How does it work in asynchrony?
• The advantages and disadvantages

If you are a little bit forgotten about some parts, 👇🏻 is ready for you!

Learning links

The Generator’s study

Asynchronous application of Generator

Summary to summarize

concept

Generator functions are an asynchronous programming solution provided in ES6. Syntactically, the Generator function is a state machine that encapsulates multiple internal states and needs to use the next() function to continue the following code.

Create and use

function* helloWorldGenerator() {
  yield 'hello'
  yield 'world'
  return 'ending'
}
var hw = helloWorldGenerator()
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
Copy the code

Commonly used method

• Generator.prototype.next()

The next() method returns an object containing the properties done and value. The method can also pass a value to the generator by taking a parameter

The returned object contains two attributes:

• done(Boolean type)
• If the iterator exceeds the end of the iteration sequence, the value istrue. In this case,valueOptionally specify the return value of the iterator.
• If the iterator can generate the next value in the sequencefalse. This is equivalent to not being fully specifieddoneProperties.
• value– Any returned by the iteratorJavascriptValue. whendoneThe value oftrueYou can ignore this value.

function* gen() {
  yield 1
  yield 2
  yield 3
}

var g = gen() // "Generator { }"
g.next() // "Object { value: 1, done: false }"
g.next() // "Object { value: 2, done: false }"
g.next() // "Object { value: 3, done: false }"
g.next() // "Object { value: undefined, done: true }"
Copy the code

• Generator.prototype.return()

The return() method returns the given value and terminates the generator

function* gen() {
  yield 1
  yield 2
  yield 3
}
var g = gen()
g.next() // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
g.next() // { value: undefined, done: true }
Copy the code

• Generator.prototype.throw()

The throw() method is used to throw an exception to the generator and resume the generator’s execution, returning an object with both done and value attributes

• done(Boolean type)
• If the iterator has already returned the end of the iteration sequence, the value istrue. In this case, you can specify iteratorsvalueThe return value of.
• If the iteration continues to produce the next value in the sequence, the value isfalse. This is equivalent to not specifyingdoneProperty value.
• value– Any returned by the iteratorJavaScriptValue. whendone 是 trueCan be omitted.

function* gen() {
  while (true) {
    try {
      yield 42
    } catch (e) {
      console.log('Error caught! ')}}}var g = gen()
g.next() // { value: 42, done: false }
g.throw(new Error('Something went wrong')) // "Error caught!"
Copy the code

Application in asynchrony

var readFile = function (name, ms) {
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      console.log(name + 'Finished reading')
      resolve()
    }, ms)
  })
}

var gen = function* () {
  console.log('to specify the generator')
  yield readFile('first'.1000)
  yield readFile('second'.2000)
  return 'Done'
}

var g = gen()
var result = g.next()
result.value
  .then(() = > {
    g.next()
  })
  .then(() = > {
    g.next()
  })
Copy the code

The advantages and disadvantages

Advantages:

• Can control the execution of the function, can cooperatecoFunction library usage

Disadvantages:

• Process management is not convenient (i.e. when phase 1 and phase 2 are executed)

For more information, please click on JavaScript asynchronous history

The title self-test

What is the yield keyword for Generator functions ()?

• A: Stop the execution
• B: Exit function
• C: Pause execution and wait for the next() method to be called
• D: Stop the command and resume the command automatically

Ii: The printed result is () after the following code is executed.

function* generator(i) {
  yield i
  yield i * 2
}

const gen = generator(10)

console.log(gen.next().value)
console.log(gen.next().value)
Copy the code

• A: [0, 10].[10, 20]
• B: 20.20
• C: 10.20
• D: 0, 10 and 10, 20

Iii. The printed result is () after the following code is executed.

function* generatorOne() {
  yield ['a'.'b'.'c']}function* generatorTwo() {
  yield* ['a'.'b'.'c']}const one = generatorOne()
const two = generatorTwo()

console.log(one.next().value)
console.log(two.next().value)
Copy the code

• A: a and a
• B: a and undefined
• C: ['a', 'b', 'c'] and a
• D: a and ['a', 'b', 'c']

console.log(one.next().value) // ['a', 'b', 'c']
console.log(one.next().value) // undefined
Copy the code

console.log(two.next().value) // 'a'
console.log(two.next().value) // 'b'
console.log(two.next().value) // 'c'
console.log(two.next().value) // undefined
Copy the code

ES 6 series Generator, we end here, thank you for your support! Your attention and praise will be the strongest motivation for us to move forward! Thank you!