• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
杰9 显示全部楼层 发表于 2021-10-25 20:01:07 |阅读模式 打印 上一主题 下一主题
什么是天生器?


天生器是在函数内部运行的一些代码
      
  • 返回值后,它会自行停息,而且——  
  • 调用程序可以要求取消停息并返回另一个值
这种“返回”不是传统的从函数 return。以是它被赋予了一个特殊的名称——yield。
天生器语法因语言而异。Javascript 的天生器语法类似于 PHP,但是区别也很大,如果你希望它们的作用相同,那么终极你会感到非常狐疑。
在 javascript 中,如果想要使用天生器,则需要:
      
  • 界说特殊的天生器函数  
  • 调用该函数创建一个天生器对象  
  • 在循环中使用该天生器对象,或直接调用其 next 方法
我们以下面这个简朴的程序做为出发点,并执行以下每个步骤:
  1. // File: sample-program.js
  2. function *createGenerator() {
  3. for(let i=0;i<20;i++) {
  4. yield i
  5. }
  6. }
  7. const generator = createGenerator()
  8. console.log(generator.next())
  9. console.log(generator.next())
复制代码
如果运行这段代码,则会得到以下输出:
  1. $ node sample-program.js
  2. { value: 0, done: false }
  3. { value: 1, done: false }
复制代码
下面我来表明该程序是怎样工作的。
天生器函数


首先,代码中存在天生器函数的界说:
  1. function* createGenerator() {
  2. for(let i=0;i<20;i++) {
  3. yield i
  4. }
  5. }
复制代码
function 后面的 * 告诉 javascript 这是一个天生器函数。以下写法都是天生器函数的有效界说。
  1. function*createGenerator
  2. function* createGenerator
  3. function *createGenerator
复制代码
*  并不是函数名的一部分。而是 function* 符号界说了天生器。
调用天生器函数


界说了天生器函数后,我们将其命名为其他名称的函数。
  1. // 注意:当调用时,没有 *。 * 不是函数名称的一部分
  2. // `function *` 是用于定义生成器函数的符号
  3. const generator = createGenerator()
复制代码
但是要记着:createGenerator 函数没有返回值。这是因为天生器函数没有传统的返回值。相反,当你直接调用天生器函数时,它总是返回实例化的 Generator 对象。
这个天生器对象具有一个 next 方法。调用 next 将在天生器函数内部运行代码。
  1. function* createGenerator() {
  2. for(let i=0;i<20;i++) {
  3.   yield i
  4. }
  5. }
复制代码
这很重要,足以再次调用它。直接调用天生器函数不会在天生器函数中运行任何代码。而是创建一个天生器对象。它在天生器对象上调用 next,从而调用天生器函数中的代码。
初次在天生器对象上调用 next 时,内部代码将会不绝运行,直到出现 yield 语句。一旦执行到 yield,javascript 将会停息该代码的执行,而 next 将返回(即给你,或yield)一个对象,该对象包含 yield 行中的值。
当你第二次(或第三次、第四次乃至更多次)再调用 next 时,代码将会取消停息并继承运行(在上次调用时中断的地方)。变量(例如本例中的 i )将会保持它的值。当代码到达另一个 yield 语句时,该函数会再次停息,并返回一个包含 yield 值的对象。
这就是为什么我们要调用两次  next
  1. console.log(generator.next())
  2. console.log(generator.next())
复制代码
会得到以下输出:
  1. { value: 0, done: false }
  2. { value: 1, done: false }
复制代码
天生器函数中的代码执行完毕后,将来对 next 的任何调用都会返回一个对象,该对象的值为 undefined 且done 设置为 true。
  1. { value: undefined, done: true }
复制代码
天生器和循环


虽然可以在天生器对象上手动调用 next,但我们重要是要在循环中使用。看一下这个稍作修改的程序。
  1. // File: sample-program.js
  2. @highlightsyntax@jscript
  3. function *createGenerator() {
  4. for(let i=0;i<5;i++) {
  5. yield i
  6. }
  7. }
  8. const generator = createGenerator()
  9. for(const value of generator) {
  10. console.log(value)
  11. }
复制代码
当在 for...of 循环中使用天生器对象时,每次循环都会在天生器对象上调用 next,并用产生的值添补变量(上面的 value)。运行该程序将会输出以下内容:
  1. $ node sample-program.js
  2. 0
  3. 1
  4. 2
  5. 3
  6. 4
复制代码
在下一篇文章中,我们将更深入地探究 for ... of 循环,并探索怎样为 javascript 提供一种内置方法来循环 javascript 中的任何对象。
总结

到此这篇关于Javascript天生器(Generator)的文章就先容到这了,更多相关Javascript天生器(Generator)内容请搜索草根技术分享从前的文章或继承欣赏下面的相关文章希望各人以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作