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)的更多相关文章

  1. es6+最佳入门实践(12)

    12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...

  2. es6+最佳入门实践(8)

    8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...

  3. es6+最佳入门实践(7)

    7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...

  4. es6+最佳入门实践(1)

    1.let和const 1.1.let和块级作用域 在es5中,js的作用域分为全局作用域和局部作用域,通常是用函数来区分的,函数内部属于局部作用域,在es6中新增了块级作用域的概念,使用{}括起来的 ...

  5. es6+最佳入门实践(14)

    14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...

  6. es6+最佳入门实践(13)

    13.模块化 13.1.什么是模块化 模块化是一种处理复杂系统分解为更好的可管理模块的方式.通俗的讲就是把一个复杂的功能拆分成多个小功能,并且以一种良好的机制管理起来,这样就可以认为是模块化.就像作家 ...

  7. es6+最佳入门实践(9)

    9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...

  8. es6+最佳入门实践(6)

    6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...

  9. es6+最佳入门实践(5)

    5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...

随机推荐

  1. Hibernate-ORM:03.Hibernate主键生成策略

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 此篇博客简单记录五种常用的主键生成策咯: 不同的主键生成策略,生成的sql语句,以及hibernate的操作都 ...

  2. golang交叉编译笔记

    GOOS:目标平台的操作系统(darwin.freebsd.linux.windows) GOARCH:目标平台的体系架构(386.amd64.arm) Mac 下编译 Linux 和 Windows ...

  3. pandas DataFrame的创建方法

    pandas DataFrame的增删查改总结系列文章: pandas DaFrame的创建方法 pandas DataFrame的查询方法 pandas DataFrame行或列的删除方法 pand ...

  4. day-8 python自带库实现ID3决策树算法

    前一天,我们基于sklearn科学库实现了ID3的决策树程序,本文将基于python自带库实现ID3决策树算法. 一.代码涉及基本知识 1. 为了绘图方便,引入了一个第三方treePlotter模块进 ...

  5. kaldi GMM模型解码指令 gmm-latgen-faster详解

    目录 - 作用: - 用法: - 可选项及含义: - 使用实例: - 作用: Generate lattices using GMM-based model. 生成基于GMM模型的lattice词格) ...

  6. BZOJ 4011 HNOI2015 落忆枫音 DAG上的dp(实际上重点在于分析)

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4011 题意概述:给出一张N点的DAG(从1可以到达所有的点),点1的入度为0.现在加一条原 ...

  7. HDU 4735 Little Wish~ lyrical step~(DLX搜索)(2013 ACM/ICPC Asia Regional Chengdu Online)

    Description N children are living in a tree with exactly N nodes, on each node there lies either a b ...

  8. css3弹性盒子模型之box-flex

    css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...

  9. mysqldump: Got error: 1135: Can't create a new thread (errno 11); if you are not out of available memory, you can consult the manual for a possible OS-dependent bug when trying to connect 解决办法

    在进行数据库备份的时候发现服务器报 mysqldump: Got error: 1135: Can't create a new thread (errno 11); if you are not o ...

  10. IDE API SDK JDK

    一.IDE 英文全称:Integrated Development Environment 中文名称:集成开发环境 本质:应用程序 功能:提供程序开发环境 组成:代码编辑器.编译器.调试器.图形用户界 ...