简单说说JavaScript的Generator 实现(ES6)
Generator 是 ES6 中新增的语法,和 Promise 一样,都可以用来异步编程
// 使用 * 表示这是一个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调用 next 恢复执行
function* test() {
let a = 1 + 2;
yield 2;
yield 3;
}
let b = test();
console.log(b.next()); // > { value: 2, done: false }
console.log(b.next()); // > { value: 3, done: false }
console.log(b.next()); // > { value: undefined, done: true }
从以上代码可以发现,加上 * 的函数执行后拥有了 next 函数,也就是说函数执行后返回了一个对象。每次调用 next 函数可以继续执行被暂停的代码。以下是 Generator 函数的简单实现
// cb 也就是编译过的 test 函数
function generator(cb) {
return (function() {
var object = {
next: 0,
stop: function() {}
};
return {
next: function() {
var ret = cb(object);
if (ret === undefined) return { value: undefined, done: true };
return {
value: ret,
done: false
};
}
};
})();
}
// 如果你使用 babel 编译后可以发现 test 函数变成了这样
function test() {
var a;
return generator(function(_context) {
while (1) {
switch ((_context.prev = _context.next)) {
// 可以发现通过 yield 将代码分割成几块
// 每次执行 next 函数就执行一块代码
// 并且表明下次需要执行哪块代码
case 0:
a = 1 + 2;
_context.next = 4;
return 2;
case 4:
_context.next = 6;
return 3;
// 执行完毕
case 6:
case "end":
return _context.stop();
}
}
});
}
简单说说JavaScript的Generator 实现(ES6)的更多相关文章
- 最简单的JavaScript模板引擎
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...
- 一个简单的javascript节流器实现
节流器 javascript的节流器主要用于延缓某些动作的执行,比如ajax请求,如果input框注册了input事件,那么当用户输入时就会持续的触发这个事件,如果回调函数中持续的通过ajax调用后台 ...
- javaScript - 面向对象 - ES5 和 ES6
javaScript - 面向对象 - ES5 和 ES6 ES5之前用 构造函数 构造函数的特点 就是一个普通函数, 他的函数名要大写.: 带方法的写法: 原型的方式: prototype 为内置的 ...
- 简单的JavaScript字符串加密解密
简单的JavaScript字符串加密解密 <div> <input type="text" id="input" autofocus=&quo ...
- JavaScript、TypeScript、ES6三者之间的联系和区别
ES6是什么 ECMAScript 6.0(以下简称ES6)是JavaScript语言(现在是遵循ES5标准)的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以 ...
- ES6 Generator vs ES6 async/await
ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...
- JavaScript Learning Paths(ES5/ES6/ES-Next)
JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...
- ES6新特性:Javascript中Generator(生成器)
ES6的很多特性都跟Generator扯上关系,而且实际用处比较广, 包含了任何需要异步的模块, 比如ajax, filesystem, 或者数组对象遍历等都可以用到: Generator的使用: G ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
随机推荐
- kvm虚拟机vnc配置
通过vnc方式访问虚拟主机上的KVM虚拟机 通过虚拟主机的IP地址与端口进行访问 1. 修改qemu.conf # vi /etc/libvirt/qemu.conf vnc_listen = &q ...
- springBoot获取@NotBlank,@NotNull注解的message信息
概述 springBoot后台验证接收的参数是否不合法时,会抛出一个BlndException异常,获取message的自定义信息并返回 验证 UserEntity类 @Data @Entity @T ...
- How to get the free disk space in PostgreSQL (PostgreSQL获取磁盘空间)
Get the current free disk space in PostgreSQL PostgreSQL获取磁盘空间 from eshizhan Here has a simple way t ...
- 【HTML】处理<br>换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法,字符串中包含HTML标签被转义的问题 解决
需求如下图: 追加给前台后,效果如下: 可以在源码看到: 是将后台给出来的数据,直接当作字符串给填充在了前台HTML中. 而查看浏览器编译后的HTML源码可以发现: 原来字符串中的<br> ...
- 2019-11-29-WPF-如何在绑定失败异常
原文:2019-11-29-WPF-如何在绑定失败异常 title author date CreateTime categories WPF 如何在绑定失败异常 lindexi 2019-11-29 ...
- 15、VUEX-Store
1.什么是VUEX Vuex是管理vue的组件状态的工具. 个人理解:vuex是管理组件之间通信的一个插件. 2.为什么要用VUEX 我们知道组件之间是独立的,组件之间想要实现通信,我目前知道的就只有 ...
- C# vb .NET识别读取QR二维码
二维码比条形码具有更多优势,有些场合使用二维码比较多,比如支付.那么如何在C#,.Net平台代码里读取二维码呢?答案是使用SharpBarcode! SharpBarcode是C#快速高效.准确的条形 ...
- HDU2023求平均成绩 - biaobiao88
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2023 求平均成绩 Problem Description 假设一个班有n(n<=50)个学生,每 ...
- Mybatis中的缓存管理
目录 Mybatis中的缓存管理 查询缓存工作原理: 配置缓存: 默认配置: 使用二级缓存: 刷新缓存过程: 配置EHcache 产生脏数据 使用原则: Mybatis中的缓存管理 查询缓存工作原理: ...
- RabbitMQ高级面试题
本文涉及:投递失败的消息怎么处理.如何实现延时队列.如何指定消息的优先级.消息的持久化是如何实现的.如何保证消息不丢失 投递失败的消息怎么处理 首先投递失败存在如下两个情况 当交换器无法根据自身的类型 ...