[ES6] 14. Generator -- 1. yield & next()

最新推荐文章于 2024-09-02 09:37:17 发布

weixin_30258027

最新推荐文章于 2024-09-02 09:37:17 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/4117147.html

本文详细介绍了ECMAScript 6中生成器的概念及其使用方法。通过示例代码讲解了如何定义和调用生成器函数，解释了生成器的执行流程及yield关键字的作用。

Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution (暂停执行) contexts.

Yield values and iterate over them until no more values exist in the generator.

You use generator by adding a * after function keyword:

function* greeting(){
   console.log(`You should call next()`);   
}

greeting(); // Nothing happens

When you call greeting(), you will find nothing happens.

For better understaning what happened, let console out what greeting() returns:

function* greeting(){
    console.log(`You called 'next()'`);
    yield "hello";
}

let greeter = greeting();
console.log(greeter); //{next: [Function], throw: [Function]}

What you can see is greeter is actually an object. It didn't invoke:

console.log(`You should call next()`);

Call the next():

function* greeting(){
    console.log(`You called 'next()'`);
}

let greeter = greeting();
let next = greeter.next();
console.log(next); // {value: undefined, done: true}

When calling the next(),

 console.log(`You called 'next()'`);

are invoked, and the value of the next is undefined and done = true.

Why value is undefined?:

Because we didn't call any yield statment.

Why done is ture?:

Because it has gone thought all yield statmens (0 = gone thought)

So let us add yield statment:

function* greeting(){
    console.log(`You called 'next()'`);
    yield "hello";
}

let greeter = greeting();
let next = greeter.next();
console.log(next);  // {value: "hello", done: false}

From the output we see, value has been chaned to "hello", but done is false.

So why done is false?:

Because we should call next() to make sure we have gone thought all the yield statmenets.

So let us add next() again:

function* greeting(){
    console.log(`You called 'next()'`);
    yield "hello";
}

let greeter = greeting();
console.log(greeter); //{next: [Function], throw: [Function]}
let next = greeter.next();
console.log(next); // {value: "hello", done: false}
let done = greeter.next();
console.log(done); // {value: "hello", done: true}

Example:

function* greeting(){
    console.log(`Generators are "lazy"`);
    yield "How";
    console.log(`I'm not called until the second next`);
    yield "are";
    console.log(`Call me before "you"?`);
    yield "you";
    console.log(`Called when "done"`);
}

let greeter = greeting();
let next = greeter.next(); // Generators are "lazy" {value: "How", done: false}

You can see that it stop at the first yield. It won't go to next until you call next();

Meaning that you can put stuff in here (after the first yield) that's not created until you explicitly need it.

If add next() three more times, all statments will be output.

转载于:https://www.cnblogs.com/Answer1215/p/4117147.html