The article hasn't been written yet. It's just published to see the typesetting and image effects.

Preface

Finally, I started writing generators, which is a step closer to the end of this series. Actually, generator is still in the state of being able to use but not understand the principle, but if knowledge is not summarized and not recorded, it is easy to forget, so I still record a little of what I have learned now. Wait until you have a deeper understanding and then come back to supplement.
Friends who want to see a deeper parsing generator can move on Talk about JavaScript and Asynchronism. The Third Talk: Generator: Turning Asynchronism into Synchronization Here we talk about the underlying implementation of generator and the usage of generator. It's the best article I've ever read, and it's not very long. I suggest you take a look at it.

Realization

According to the usual style, let's try to realize generator by ourselves first.
Try ing...
Well, after trying, it can't be realized. Learn the usage of generator honestly.

usage

In my understanding, the greatest feature of generator is that it can stop the function in a specific place and wait for it to be waken up and continue to execute in the internal environment of the function. Let's take a look at the code:
Note: [1] Iterator Object object: reference Iterator The article is long, but if you just want to know what Iterator Object is, it's enough to read the first section.

//Output splitting line function, interested in Baidu how to set console.log style
function cut_off(color) {
  console.log("%c------------------------------------------","color:"+color+";font-size:20px");
}

//* For the identification of generator function, if we want to create a generator function, we must add the following function*
function* generator() {
  let num1, num2;
  num1 = 123;
  console.log("num1", num1, "num2", num2);
  //The yield is where the function pauses, and the value after the yield is returned at the same time.
  yield num1;
  num2 = 456;
  console.log("num1", num1, "num2", num2);
  yield num2;
  console.log("num1", num1, "num2", num2);
  return "end"
}

console.log("generator defined");
//The function returns an Iterator Object object.
// But unlike normal functions, functions do not execute code inside the function at this time.
let g = generator();
console.log("g defined");
cut_off("red");

console.log("g.next() run 1");
//Start executing the code inside the function and return the value after yield when it arrives
console.log(g.next());
cut_off("red");

console.log("g.next() run 2");
//Execute from where it was last executed, and return the value after yield when it arrives
console.log(g.next());
cut_off("red");

console.log("g.next() run 3");
//From where the last execution was completed, this is the last valuable return, and the state of done will change to true.
console.log(g.next());
cut_off("red");

console.log("g.next() run 4");
//Called again after execution has been completed, always returning {value:undefined, done: true}
console.log(g.next());
cut_off("red");

console.log("g.next() run 5");
//Called again after execution has been completed, always returning {value:undefined, done: true}
console.log(g.next());

Put up a comparison of the code and the results of the run