Javascript生成器(Generator)的介绍与使用


Posted in Javascript onJanuary 31, 2021

什么是生成器?

生成器是在函数内部运行的一些代码

  • 返回值后,它会自行暂停,并且——
  • 调用程序可以要求取消暂停并返回另一个值

这种“返回”不是传统的从函数 return。所以它被赋予了一个特殊的名称——yield。

生成器语法因语言而异。Javascript 的生成器语法类似于 PHP,但是区别也很大,如果你希望它们的作用相同,那么最终你会感到非常困惑。

在 javascript 中,如果想要使用生成器,则需要:

  • 定义特殊的生成器函数
  • 调用该函数创建一个生成器对象
  • 在循环中使用该生成器对象,或直接调用其 next 方法

我们以下面这个简单的程序做为起点,并执行以下每个步骤:

// File: sample-program.js
function *createGenerator() {
 for(let i=0;i<20;i++) {
 yield i
 }
}

const generator = createGenerator()

console.log(generator.next())
console.log(generator.next())

如果运行这段代码,则会得到以下输出:

$ node sample-program.js

{ value: 0, done: false }
{ value: 1, done: false }

下面我来解释该程序是如何工作的。

生成器函数

首先,代码中存在生成器函数的定义:

function* createGenerator() {
 for(let i=0;i<20;i++) {
 yield i
 }
}

function 后面的 * 告诉 javascript 这是一个生成器函数。以下写法都是生成器函数的有效定义。

function*createGenerator
function* createGenerator
function *createGenerator

*  并不是函数名的一部分。而是 function* 符号定义了生成器。

调用生成器函数

定义了生成器函数后,我们将其命名为其他名称的函数。

// 注意:当调用时,没有 *。 * 不是函数名称的一部分
// `function *` 是用于定义生成器函数的符号
const generator = createGenerator()

但是要记住:createGenerator 函数没有返回值。这是因为生成器函数没有传统的返回值。相反,当你直接调用生成器函数时,它总是返回实例化的 Generator 对象。

这个生成器对象具有一个 next 方法。调用 next 将在生成器函数内部运行代码。

function* createGenerator() {
 for(let i=0;i<20;i++) {
  yield i
 }
}

这很重要,足以再次调用它。直接调用生成器函数不会在生成器函数中运行任何代码。而是创建一个生成器对象。它在生成器对象上调用 next,从而调用生成器函数中的代码。

首次在生成器对象上调用 next 时,内部代码将会一直运行,直到出现 yield 语句。一旦执行到 yield,javascript 将会暂停该代码的执行,而 next 将返回(即给你,或yield)一个对象,该对象包含 yield 行中的值。

当你第二次(或第三次、第四次甚至更多次)再调用 next 时,代码将会取消暂停并继续运行(在上次调用时中断的地方)。变量(例如本例中的 i )将会保持它的值。当代码到达另一个 yield 语句时,该函数会再次暂停,并返回一个包含 yield 值的对象。

这就是为什么我们要调用两次  next

console.log(generator.next())
console.log(generator.next())

会得到以下输出:

{ value: 0, done: false }
{ value: 1, done: false }

生成器函数中的代码执行完毕后,将来对 next 的任何调用都会返回一个对象,该对象的值为 undefined 且done 设置为 true。

{ value: undefined, done: true }

生成器和循环

虽然可以在生成器对象上手动调用 next,但我们主要是要在循环中使用。看一下这个稍作修改的程序。

// File: sample-program.js
@highlightsyntax@jscript
function *createGenerator() {
 for(let i=0;i<5;i++) {
 yield i
 }
}

const generator = createGenerator()
for(const value of generator) {
 console.log(value)
}

当在 for...of 循环中使用生成器对象时,每次循环都会在生成器对象上调用 next,并用产生的值填充变量(上面的 value)。运行该程序将会输出以下内容:

$ node sample-program.js
0
1
2
3
4

在下一篇文章中,我们将更深入地探讨 for ... of 循环,并探索怎样为 javascript 提供一种内置方法来循环 javascript 中的任何对象。

总结

到此这篇关于Javascript生成器(Generator)的文章就介绍到这了,更多相关Javascript生成器(Generator)内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JavaScript严格模式详解
Nov 18 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 #Javascript
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 #Javascript
小程序实现列表倒计时功能
Jan 29 #Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 #Javascript
vue监听键盘事件的相关总结
Jan 29 #Vue.js
You might like
初学CAKEPHP 基础教程
2009/11/02 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
微信小程序如何获取手机验证码
2018/11/04 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
python数据化运营的重要意义
2019/11/25 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python实现取余操作的简单实例
2020/08/16 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
初中高效课堂实施方案
2014/02/26 职场文书
小学英语课后反思
2014/04/26 职场文书
服务行业口号
2014/06/11 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
长城导游词
2015/01/30 职场文书
公司开业主持词
2015/07/02 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers