ES6 Generator基本使用方法示例


Posted in Javascript onJune 06, 2020

本文实例讲述了ES6 Generator基本使用方法。分享给大家供大家参考,具体如下:

1.Generator介绍

先来一段Generator的基础代码

function* g(){
 yield 100;
 yield 200;
 return 300;
}
let gg = g();
console.log(gg);            // Object [Generator] {}
console.log(gg.next());        // { value: 100, done: false }
console.log(gg.next());        // { value: 200, done: false }
console.log(gg.next());        // { value: 300, done: true }
console.log(gg.next());        // { value: undefined, done: true }

首先我们看到:

  • Generator是由functinon*定义的,在generator内部可以使用yield
  • Generator不是函数,而是一个对象,并且在执行开始就进入暂停状态,而不是直接执行全部操作
  • 通过next()来执行下一步操作,返回的都是{ value: xxx, done: xxx }这样的形式,value代表上一次操作返回的值,done有两个值,一个是true,一个是false,表示整个流程是否全部结束。

2.Generator异步编程

generator是ES6中引入的异步解决方案,我们来看看它与promise处理异步的对比,来看它们的差异。

// 这里模拟了一个异步操作
function asyncFunc(data) {
 return new Promise( resolve => {
  setTimeout(
   function() {
    resolve(data)
   },1000
  )
 })
}

promise的处理方式:

asyncFunc("abc").then( res => {
 console.log(res);                    // "abc"
 return asyncFunc("def")
}).then( res => {
 console.log(res);                    // "def"
 return asyncFunc("ghi")
}).then( res => {
 console.log(res);                    // "ghi"
})

generator的处理方式:

function* g() {
 const r1 = yield asyncFunc("abc");
 console.log(r1);                            // "abc"
 const r2 = yield asyncFunc("def");
 console.log(r2);                            // "def"
 const r3 = yield asyncFunc("ghi");
 console.log(r3);                            // "ghi"
}

let gg = g();
let r1 = gg.next();
r1.value.then(res => {
 let r2 = gg.next(res);
 r2.value.then(res => {
  let r3 = gg.next(res);
  r3.value.then(res => {
   gg.next(res)
  })
 })
})

promise多次回调显得比较复杂,代码也不够简洁,generator在异步处理上看似同步的代码,实际是异步的操作,唯一就是在处理上会相对复杂,如果只进行一次异步操作,generator更合适。

3.yield和yield*

先来看两段代码

function* g1() {
 yield 100;
 yield g2();
 return 400;
}

function* g2() {
 yield 200;
 yield 300;
}

let gg = g1();
console.log(gg.next());                // { value: 100, done: false }
console.log(gg.next());                // { value: Object [Generator] {}, done: false }
console.log(gg.next());                // { value: 400, done: true }
console.log(gg.next());                // { value: undefined, done: true }
function* g1() {
 yield 100;
 yield* g2();
 return 400;
}

function* g2() {
 yield 200;
 yield 300;
}

let gg = g1();
console.log(gg.next());                // { value: 100, done: false }
console.log(gg.next());                // { value: 200, done: false }
console.log(gg.next());                // { value: 300, done: false }
console.log(gg.next());                // { value: 400, done: true }

yield对另一个generator不会进行遍历,返回的是迭代器对象,而yield*会对generator进行遍历迭代。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 #Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 #Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 #Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 #Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 #Javascript
taro 实现购物车逻辑的实例代码
Jun 05 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
php读取本地json文件的实例
2018/03/07 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
python去除所有html标签的方法
2015/05/05 Python
Python中return语句用法实例分析
2015/08/04 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Python实现上下文管理器的方法
2020/08/07 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
PHP面试题大全
2015/10/16 面试题
升职自荐信范文
2013/10/05 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
材料采购员岗位职责
2013/12/17 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python