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获取路径设计源码
May 22 Javascript
angularJS中router的使用指南
Feb 09 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
浅谈Vue的响应式原理
May 30 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
php分页函数
2006/07/08 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
php Session无效分析资料整理
2016/11/29 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
vuejs指令详解
2017/02/07 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python返回昨天日期的方法
2015/05/13 Python
python从入门到精通(DAY 3)
2015/12/20 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python数据结构之图的应用示例
2018/05/11 Python
基于python生成器封装的协程类
2019/03/20 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
车间班组长岗位职责
2013/11/13 职场文书
单位介绍信范文
2014/01/18 职场文书
《故乡》教学反思
2014/04/10 职场文书
银行进社区活动总结
2014/07/07 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python