How to use the JavaScript generator

This article mainly explains "how to use the JavaScript generator". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the JavaScript generator.

1.   what is a generator?

A traversal that can be understood as the internal state of a function. Each time the generator is called, the internal state of the function changes.

2.   writing method

There is an asterisk between the function and the function name *

Yield expressions can be used inside the function body to define different states.

3. How is the   generator implemented?

There is a next method in the generator that traverses the next state

Yield expression: equivalent to a pause flag, only calling the next method will traverse the next internal state

When using the next method, execute from the beginning of the function or the last stop until the next yield expression (or return statement) is encountered

(that is, the generator function is equivalent to a function that can pause execution, and the yield expression is the pause flag)

Let's understand it through an example:

(give us an example of the familiar Hello Worldwaters!)

Function* sayHW () {yield "Hello"; yield "World"; return "!!";} let say = sayHW (); console.log (say.next ()); console.log (say.next ()); console.log (say.next ())

The next method is called three times:

On the first call, when yield stops, the next method returns an object whose value property is the value of the current yield expression. The value of the Hello,done property is false, indicating that the traversal is not finished.

On the second call, when yield stops, the next method returns an object whose value property is the value of the current yield expression. The value of the World,done property is false, indicating that the traversal is not finished.

Then until the third call, execute to the return statement (if not, to the end of the function). At this point, the value of the value property returned by next is the value after the return statement, and the property of done is true (if there is no return, done is still false at this time), indicating the end of the loop.

Next, let's output next again:

Console.log (say.next ())

At this point, next will return this object, with value as undefined,done and true as true (regardless of whether there is a return statement before, the function has already been run, so done is true)

4.   uses generator functions to customize iterators

From the above, we know that the generator function allows us to define a function that contains its own iterative algorithm, while it can automatically maintain its own state.

Because a custom iterator needs to maintain its internal state explicitly, we can use it to customize the iterator.

(if you don't know anything about iterators, you can read this article: JavaScript iterators.)

Next, let's understand it through an example:

Now that we have a colors object that we want to traverse with for...of, we can customize the iterator.

Let colors = {blue: "blue", green: "green", yellow: "yellow"}

Common way of writing:

Colors [Symbol.iterator] = function () {let keys = Object.keys (colors); / / if you use let keys = Reflect.ownKeys (colors), keys will include some attributes that cannot be enumerated / / then the following len should be subtracted by one, minus the attribute Symbol.iterator / / choose to use let len = keys.length; let index = 0 according to the actual situation Return {next: function () {if (index < len) {return {value: colors [index + +]] Done: false}} return {done: true}}

Write with the generator function:

Colors [Symbol.iterator] = function* () {let keys = Object.keys (colors); / / if you use let keys = Reflect.ownKeys (colors), including some attributes that cannot be enumerated / / then the following len should be subtracted by one, minus the attribute Symbol.iterator / / choose to use let len = keys.length; let index = 0 according to the actual situation While (index < len) {yield colors [index + +];}}

Thank you for reading, the above is the content of "how to use JavaScript generator". After the study of this article, I believe you have a deeper understanding of how to use JavaScript generator, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!