js es6深入应用系列(Generator)
前言
generotor 和 普通函数的不同在于function 的时候加了一个*,
是的,我们看到es5的一个陌生关键字,yield,这个是不寻常的,为什么这么说呢?
这个在c#中,很常见的一个关键字,下面就来解释一下js中的。
正文
function* gen() {
yield "1";
yield "2"
}
var iterator = gen();
console.log(iterator);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
这个玩意儿如果运行的话,会返回一个Iterator实例, 然后再执行Iterator实例的next()方法, 那么这个函数才开始真正运行,
并把yield后面的值包装成固定对象并返回,直到运行到函数结尾, 最后再返回undefined;
我为什么这么说呢?改一下代码:
function* gen() {
yield "1";
console.log('123');
yield "2";
}
var iterator = gen();
console.log(iterator);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
这个可以看图说话我就不多说了。
下面介绍一下其他的一些特性。
yield*
yield* 表达式用于委托给另一个generator 或可迭代对象。
下面是委托为另一个:generator
function* foo() {
yield 0;
yield 1;
}
function* bar() {
yield 'x';
yield* foo();
yield 'y';
}
for (let v of bar()) {
console.log(v);
};
实际上上面就说了可以委托为任何可迭代的对象。
function* g3() {
yield* [1, 2];
yield* "34";
yield* arguments;
}
var iterator = g3(5, 6);
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: "3", done: false }
console.log(iterator.next()); // { value: "4", done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 6, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
return
The return() method returns the given value and finishes the generator.
function* gen() {
yield 1;
yield 2;
yield 3;
}
const g = gen();
g.next(); // { value: 1, done: false }
g.return('foo'); // { value: "foo", done: true }
g.next(); // { value: undefined, done: true }
throw()
The throw() method resumes the execution of a generator by throwing an error into it and returns an object with two properties done and value.
function* gen() {
while (true) {
try {
yield 42;
} catch (e) {
console.log('Error caught!');
}
}
}
const g = gen();
g.next();
// { value: 42, done: false }
g.throw(new Error('Something went wrong'));
// "Error caught!"
// { value: 42, done: false }
next
next 分为带参数和不带参数,不带参数的我就不说了,说下带参数的。
function* foo(x) {
var y = 2 * (yield (x + 1));
console.log(y)
var z = yield (y / 3);
console.log(x);
console.log(z);
console.log(y);
return (x + y + z);
}
var b = foo(5);
console.log(b.next()); // { value:6, done:false }
console.log(b.next(12)); // { value:8, done:false }
console.log(b.next(13)); // { value:42, done:true }
惊喜不惊喜意外不意外?
过程其实也很简单,比如说第二个传入了12。
这个运行过程其实是从第一个yiled 开始运行的,也就是这个12会替换(x + 1)
这样y就等于24了,然后yield (y / 3) 就是8了。
后续也是这样。
应用
<script>
"use strict";
function* main() {
var result = yield request("http://www.filltext.com?rows=10&f={firstName}");
console.log(result);
//do 别的ajax请求;
}
function request(url) {
var r = new XMLHttpRequest();
r.open("GET", url, true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
var data = JSON.parse(r.responseText);
//数据成功返回以后, 代码就能够继续往下走了;
it.next(data);
};
r.send();
}
var it = main();
it.next();
console.log("执行到这儿啦");
</script>
我把打印放出来:
其实上面可能存在疑惑的地方,那就是为什么console.log(result);会打印出it.next(data);中data的结果。
其实非常简单,当var result = yield request("http://www.filltext.com?rows=10&f={firstName}");执行完毕的时候,因为没有next,然后就被阻塞了。
那么更具上面next的特性。it.next(data)中的data会替换:yield request("http://www.filltext.com?rows=10&f={firstName}"),那么result的结果就是data。
实现了我们async和await的效果。
js es6深入应用系列(Generator)的更多相关文章
- es6 快速入门 系列 —— 变量声明:let和const
其他章节请看: es6 快速入门 系列 变量声明:let和const 试图解决的问题 经典的 var 声明让人迷惑 function demo1(v){ if(v){ var color='red' ...
- 【2015上半年总结】js开源组件开发系列索引
js开源组件开发系列一索引 2015.8 by 田想兵 个人网站 从3月份进入新公司以来,时经五个月,我以平均每周1个小组件的速度,已经完成的js组件有22个之余了,已基本上全部用到实际项目中,这些小 ...
- 在Node.js中使用RabbitMQ系列二 任务队列
在上一篇文章在Node.js中使用RabbitMQ系列一 Hello world我有使用一个任务队列,不过当时的场景是将消息发送给一个消费者,本篇文章我将讨论有多个消费者的场景. 其实,任务队列最核心 ...
- js es6 map 与 原生对象区别
区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...
- Node.js笔记07——不使用generator自定义一个项目,深入了解项目结构
一.初始化项目 新建项目 git init manager 新建view文件夹,建几个静态文件夹 新建app.js 快速初始化项目依赖 npm init -y 安装express npm instal ...
- js 深入原理讲解系列-Promise
js 深入原理讲解系列-Promise 能看懂这一题你就掌握了 js Promise 的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? const ...
- js 深入原理讲解系列-事件循环
js 深入原理讲解系列-事件循环 能看懂这一题你就掌握了 js 事件循环的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? console.log(' ...
- js 深入原理讲解系列-currying function
js 深入原理讲解系列-currying function 能看懂这一题你就掌握了 js 科里函数的核心原理 不要专业的术语,说人话,讲明白! Q: 实现 sum 函数使得以下表达式的值正确 cons ...
- es6 快速入门 系列 —— promise
其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...
随机推荐
- SQL SERVER 那点事
温故而知新 一.创建数据库 USE MASTER; GO IF EXISTS(SELECT * FROM sys.databases WHERE [name] = 'student') BEGIN A ...
- 开始appium的第一个脚本
设置DesiredCapabilities 存在于以下库中: org.openqa.selenium.remote.DesiredCapabilities Desired Capabilities告诉 ...
- 解决Macbook Pro 2017安装Windows10双系统后在Windows系统中Apple蓝牙鼠标不能使用问题
MAC BOOK PRO 2017安装Windows10双系统 在Windows系统中蓝牙鼠标不能使用解决办法 最近因工作需要,macOS系统不能要求,大部分工作必须要在Windows系统中进行,最初 ...
- PHP如何实现判断提交的是什么方式
function get_request_method() { // $_SERVER包含了诸多头信息.路径.以及脚本位置等等信息的数组,这个数组中的项目有web服务器创建. if (isset($_ ...
- [Qt]执行cmd命令
要加 /c 参数 QProcess p; p.start("cmd", QStringList()<<"/c"<<"ping ...
- 对于WebP格式入门解读
因为项目中需要用到大量动画效果,前期尝试过几种方案,比如GIF.帧动画.lottie.SVGA等格式的动画渲染方案,发现都存在各式各样的问题.比如: 1,GIF格式.5秒的动画,一张图大小可能就会达到 ...
- Ubuntu 之 win10更新ubuntu启动项消失
问题描述: 昨晚windows更新,今天启动的时候发现启动项没有了,直接进入windows. 解决方案一: 首先进入BIOS看一看是否开启启动项选择,然后再把安全模式(secure boot)关闭(重 ...
- Java实现zip文件解压[到指定目录]
2019独角兽企业重金招聘Python工程师标准>>> package com.ljheee.ziptool.core; import java.io.File; import ja ...
- Character Array and Character Pointer
最近复习数据结构实验时,碰到这么一行代码,看的有点不爽. typedef char** HuffmanCode; 借此梳理下数组和指针. int* p; //指针变量p中存的地址代表的内存单元中的数据 ...
- Jmeter 插件图表分析
1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间间隔是1毫秒,在 setting 中可以设置时间间隔以及其他的参数,右击可以导出 ...