es6+最佳入门实践(10)
10.Generator
10.1.Generator是什么？
Generator函数是ES6提供的一种异步编程解决方案。在它的内部封装了多个状态，因此，又可以理解为一种状态机，执行Generator函数后返回一个迭代器对象，使用这个迭代器对象可以遍历出Generator函数内部的状态
Generator函数和传统函数的不同点有：1 函数定义的时候，function关键字后面加“*”， 2 内部使用yield关键字定义内部状态
function* HelloGenerator() {
yield "状态1";
yield "状态2";
yield "状态3";
yield "状态4";
}
let hg = HelloGenerator();
console.log(hg.next()); //{value: "状态1", done: false}
console.log(hg.next()); //{value: "状态2", done: false}
console.log(hg.next()); //{value: "状态3", done: false}
console.log(hg.next()); //{value: "状态4", done: false}
console.log(hg.next()); //{value: undefined, done: true}
Generator函数被调用后，并不会立即执行完成，而是会在遇到yield关键字后暂停，返回的也不是函数的运行结果，而是一个执行内部状态的指针对象(Iterator对象)
注意1: next方法内可以传参数，这个参数的值作为上一次状态的返回值
function* HelloGenerator() {
let result = yield "状态1";
console.log(result);
yield "状态2";
yield "状态3";
yield "状态4";
}
let hg = HelloGenerator();
console.log(hg.next());
console.log(hg.next('nodeing'));
注意2: 可以使用for...of来遍历Generator内部状态
function* HelloGenerator() {
yield "状态1";
yield "状态2";
yield "状态3";
yield "状态4";
}
let hg = HelloGenerator();
for( let i of hg){
console.log(i);
}
注意3: 对象没有Symbol.Iterator属性，我们可以手动添加，让其具有Iterator接口
let obj = {};
function* gen() {
yield 1;
yield 2;
yield 3;
yield 4;
}
obj[Symbol.iterator] = gen;
for(let a of obj){
console.log(a);
}
10.2.Generator应用
1.限制抽奖次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">抽奖</button>
<input type="text" id="ipt">
<script>
let oBtn = document.getElementById('btn');
let oIpt = document.getElementById('ipt');
let start = gen(5);
let timmer = null;
oBtn.onclick = () => {
start.next();
};
function draw(count) {
clearInterval(timmer);
let num = Math.floor(Math.random() * 30);
let prize = 0;
timmer = setInterval(()=>{
prize++;
if( num === prize){
clearInterval(timmer);
alert("还可以抽"+count+"次");
return;
}
oIpt.value = prize;
}, 100);
}
function* gen(count) {
while (count > 0){
count--;
yield draw(count);
}
}
</script>
</body>
</html>
2.异步读取文件
const fs = require('fs');
function readFile(path) {
return new Promise((resolve, reject) => {
fs.readFile(path, (err, data) => {
if(err){
reject(err)
}else {
resolve(data)
}
})
})
}
function* asyncFile() {
yield readFile('a.txt');
yield readFile('b.txt');
yield readFile('c.txt');
}
let gen = asyncFile();
gen.next().value.then((data)=>{
console.log(data.toString());
return gen.next().value;
}).then((data2)=>{
console.log(data2.toString());
return gen.next().value;
}).then((data3)=>{
console.log(data3.toString())
});
如果觉得上面的写法还比较麻烦的话，我们可以引入一个co模块，让aysncFile里面的代码自动执行
const co = require('co');
function* asyncFile() {
let a = yield readFile('a.txt');
let b = yield readFile('b.txt');
let c = yield readFile('c.txt');
console.log(a.toString(), b.toString(), c.toString())
}
co(asyncFile()).then(()=>{
console.log('文件读取完成')
});
视频教程地址：http://edu.nodeing.com/course/50
es6+最佳入门实践(10)的更多相关文章
- es6+最佳入门实践(12)
12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...
- es6+最佳入门实践(8)
8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...
- es6+最佳入门实践(7)
7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...
- es6+最佳入门实践(1)
1.let和const 1.1.let和块级作用域 在es5中,js的作用域分为全局作用域和局部作用域,通常是用函数来区分的,函数内部属于局部作用域,在es6中新增了块级作用域的概念,使用{}括起来的 ...
- es6+最佳入门实践(14)
14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...
- es6+最佳入门实践(13)
13.模块化 13.1.什么是模块化 模块化是一种处理复杂系统分解为更好的可管理模块的方式.通俗的讲就是把一个复杂的功能拆分成多个小功能,并且以一种良好的机制管理起来,这样就可以认为是模块化.就像作家 ...
- es6+最佳入门实践(9)
9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...
- es6+最佳入门实践(6)
6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...
- es6+最佳入门实践(5)
5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...
随机推荐
- DATAGUARD实施文档
DATAGUARD实施文档 一.前期准备及备机安装: 通过获取到的主机信息规划备机数据库安装基础信息:(注:在安装备机时需要尽量保障与主机库信息一致,以下表格中的备机信息为根据主机信息规划的安装信息. ...
- HBase 通过myeclipce脚本来获取固定columns(获取列簇中的列及对应的value值)
第一步:关联Jar包 1. 配置hadoop-env.sh文件添加Hbase关联jar包 /opt/modules/hadoop-2.5.0-cdh5.3.6/etc/hadoop下编辑hadoop- ...
- c/c++不能返回局部对象和局部变量的指针或引用解释
在编写c/c++代码时,调用函数的书写让程序变得整洁易读,但是调用函数的返回值(局部变量的返回值,变量,结构体,数组等)也有注意事项.c/c++严禁返回局部变量的指针或引用. 其实函数的返回值的规则非 ...
- 2007: [Noi2010]海拔
2007: [Noi2010]海拔 https://www.lydsy.com/JudgeOnline/problem.php?id=2007 分析: 平面图最小割. S在左下,T在右上,从S到T的一 ...
- win10 java环境变量配置
首先,你应该已经安装了 Java 的 JDK 了(如果没有安装JDK,请跳转到此网址:http://www.oracle.com/technetwork/java/javase/downloads/i ...
- Qt 建立带有子项目的工程
刚需,软件需要用到多个子项目 第一步 打开Qt新建子项目工程 如图 在此时鼠标右键,选着新建子项目如图 就是正常的新建项目的步骤,直接上图 完工,可以愉快的撸代码了
- 今日Linux
一.复习了vi 三个模式下的一些操作.贴上一些比较常用,个人觉得比较难记的操作.1.一般模式:h 光标向左移动一个字符j 光标向下移动一个字符K 光标向上移动一个字符l 光标向右移动一个 ...
- (三)宇宙大战 Space Battle -- 场景SCENE切换、UserDefaults统计分数、Particle粒子效果
此<宇宙大战 Space Battle>SpirteKit手机游戏教程共分为三系列: (一)宇宙大战 Space Battle -- 新建场景Scene.精灵节点.Particle粒子及背 ...
- xadmin站点管理面样样式控制
xadmin可以使用的页面样式控制基本与Django原生的admin一直. list_display 控制列表展示的字段 search_fields 控制可以通过搜索框搜索的字段名称,xadmin使用 ...
- 剑指offer-树的子结构17
题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) class Solution: def issubTree(self,pRoot1,pRoot2) ...