This article brings you knowledge about JavaScript generators, how generators are implemented, and the use of generator functions to customize iterators. I hope it will be helpful to you.

1. What is a generator?

can be understood as a traverser of the internal state of a function. Every time the generator is called, the internal state of the function changes.

2. There is an asterisk between

• #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, which traverses the next state
• yield Expression: equivalent to the pause flag, only calling next method will traverse the next internal state
• When using the next method, execution starts from the beginning of the function or where it last stopped until it encounters Until the next yield expression (or return statement)
  (that is, the generator function is equivalent to a function that can suspend execution, yield expression The formula is the pause sign)

Let us understand it through an example:
(Take the familiar Hello World!!!)

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 in total:

When called for the first time, it encounters yield and stops, next method Returns an object whose value attribute is the value of the current yield expression Hello, and the value of the done attribute is false , indicating that the traversal has not ended

When calling for the second time, it stops when encountering yield, and the next method returns an object with its value The attribute is the value of the current yield expression World, and the value of the done attribute is false, indicating that the traversal has not ended

Then until the third call, execution reaches the return statement (if not, execution continues until the end of the function). At this time, the value of the value attribute returned by next is the value after the return statement, and the attribute of done is true (If there is no return, done is still false at this time), indicating the end of the loop.

Next, we output again next:

console.log(say.next());

At this time next will return this object, value is undefined, done is · true (regardless of whether there is a return statement before, the function has already been run at this time It’s done, so done are all true)

4. Use the generator function to customize the iterator

As explained above , we can know that the generator function allows us to define a function that contains its own iteration algorithm, and at the same time it can automatically maintain its own state.

Since custom iterators need to maintain their internal state explicitly, we can use it to customize iterators.
(If you don’t know about iterators, you can read this article first: JavaScript iterators)

Next, let us understand it through an example:

Now there is a colors object, we want to use for...of to traverse it, then we can customize the iterator.

let colors = {
    blue : "蓝色",
    green : "绿色",
    yellow : "黄色"}

Normal writing:

colors[Symbol.iterator] = function() {
	let keys = Object.keys(colors);
	// 如果用 let keys = Reflect.ownKeys(colors)，keys 就会包括一些不可枚举的属性
	// 那么后面的 len 要减一，减去Symbol.iterator这个属性
	// 根据实际情况选择使用
	let len = keys.length;
	let index = 0;
	
	return {
	    next : function() {
	        if (index <p><strong>Writing using generator function: </strong></p><pre class="brush:php;toolbar:false">colors[Symbol.iterator] = function* () {
    let keys = Object.keys(colors);
    // 如果用 let keys = Reflect.ownKeys(colors)，包括了一些不可枚举的属性
    // 那么后面的 len 要减一，减去Symbol.iterator这个属性
    // 根据实际情况选择使用
    let len = keys.length;
    let index = 0;
    
    while(index <p><img src="https://img.php.cn/upload/article/000/000/067/8f7f79150b168282d5b05a3ad154c98b-2.png" alt="Understand what a JavaScript generator is in ten minutes (organized and shared)"></p><p>That's it. After using the generator function to customize the iterator, it is much simpler. </p><p>[Related recommendations: <a href="//m.sbmmt.com/course/list/17.html" target="_blank">javascript learning tutorial</a><strong>]</strong></p>

The above is the detailed content of Understand what a JavaScript generator is in ten minutes (organized and shared). For more information, please follow other related articles on the PHP Chinese website!