JS的ES6的Generator

Posted 海恋天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS的ES6的Generator相关的知识,希望对你有一定的参考价值。

JS的ES6的Generator

1.Generator函数的概念:

  • ES6提供的解决异步编程的方案之一,现在已经不怎么用了被淘汰了。

  • Generator函数是一个状态机,内部封装了不同状态的数据。

  • 用来生成遍历器对象

  • 暂停函数,yield关键字暂停,next()方法启动,yield可以获得next方法传递过来的数据,如果无数据yield返回undefined,如果有数据则返回数据。

2.Generator使用:

1 function* generatorExample(){
2   let result = yield \'hello\';  // 状态值为hello
3   yield \'generator\'; // 状态值为generator
4 }
  • function与函数名之间有一个星号

  • 内部用yield表达式来定义不同的状态

  • generator函数返回的是指针对象(iterator),而不会执行函数内部逻辑

  • 调用next方法函数内部逻辑开始执行,遇到yield表达式停止,返回{value: yield后的表达式结果/undefined, done: false/true}

  • 再次调用next方法会从上一次停止时的yield处开始,直到最后

  • yield语句返回结果通常为undefined, 当调用next方法时传参内容会作为启动时yield语句的返回值。

3.示例:

 1     var num = 1;
 2 
 3     function AsyncUtil() {
 4       setTimeout(() => {
 5         console.log("异步任务" + num + "执行");
 6         
 7         let data = "异步任务" + num + "的返回数据xxxx";
 8 
 9         num++;
10         GU.next(data); //继续执行yield之后的语句
11       }, 2000);
12     }
13 
14     function* generatorUtil() {
15       console.log("函数开始执行");
16 
17       let result = yield AsyncUtil(); //遇到yield就暂停,执行异步任务,让异步任务调用generatorUtil继续执行。
18       console.log("异步任务执行成功,返回值:" + result);
19       console.log("函数继续执行");
20 
21       result = yield AsyncUtil();
22       console.log("异步任务执行成功,返回值:" + result);
23 
24       console.log("函数执行结束");
25 
26     }
27 
28     let GU = generatorUtil();
29     console.log(GU);
30 
31     GU.next();  //只有个使用next方法才能调用执行

 

以上是关于JS的ES6的Generator的主要内容,如果未能解决你的问题,请参考以下文章

ES6之Generator 函数的异步应用

js es6深入应用系列(Generator)

js es6深入应用系列(Generator)

es6 学习二 Generator

学习ES6生成器(Generator)

廖雪峰js教程笔记6 generator一个坑 看完python在回来填坑