JavaScript 中的生成器函数

简介: 调用一个生成器函数并不会马上执行它里面的语句,而是返回一个这个生成器的 迭代器对象。在生成器函数内部可以通过yield关键字来中断代码的执行,迭代器每次执行都会执行到下一次 yield 或者 return。

语法


function* name([param[, param[, ... param]]]) { statements }

  • name:函数名
  • param:要传递给函数的一个参数的名称,一个函数最多可以有 255 个参数。
  • statements:普通 JS 语句。

调用一个生成器函数并不会马上执行它里面的语句,而是返回一个这个生成器的 迭代器对象。在生成器函数内部可以通过yield关键字来中断代码的执行,迭代器每次执行都会执行到下一次 yield 或者 return。

生成器函数不能作为构造器使用。

每次迭代的返回值是一个对象,结构为{value: string; done: boolean}value 是执行到的 yield 表达式的结果,done 表示迭代器是否迭代结束,false 表示迭代还在继续,true 表示迭代完成。

通过调用迭代器对象的 next 方法可以控制生成器函数的执行,next 方法可以接受参数作为当次 yield 表达式的计算结果。

function* gen(x: number): Generator<
  number,
  number,
  number
> {
  const y = yield x + 10;
  const z = yield x * y;
  return z;
}
const g = gen(2);
console.log(g.next(1000)); // { value: 12, done: false }
console.log(g.next(5)); // { value: 10, done: false }
console.log(g.next(22)); // { value: 22, done: true }
复制代码

注意,如果 yield 的结果有赋值操作需要在 TS 中生成器函数需要标注生成器函数的类型。

interface Generator<
  T = unknown,
  TReturn = any,
  TNext = unknown
> extends Iterator<T, TReturn, TNext> {
    // NOTE: 'next' is defined using a tuple to ensure 
    // we report the correct assignability errors in all places.
    next(...args: [] | [TNext]): IteratorResult<T, TReturn>;
    return(value: TReturn): IteratorResult<T, TReturn>;
    throw(e: any): IteratorResult<T, TReturn>;
    [Symbol.iterator](): Generator<T, TReturn, TNext>;
}
复制代码

1682519182(1).png

由于每一步 yield 的结果并不会直接用于下一步计算,而是返回值的 value, 真正用于下一步计算的结果是 next 填写的参数。

第一次next 传的参数总是无效的,因为第一次中断依赖的变量只能通过形参级全局变量,没有更早的yield 中断。

如果用的是 yield*,则表示将执行权移交给另一个生成器函数(当前生成器暂停执行)。

function* anotherGenerator(i: number) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}
function* generator(i: number){
  yield i;
  yield* anotherGenerator(i);// 移交执行权
  yield i + 10;
}
var gen = generator(10);
console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20
复制代码


练习


分析下面的代码的输出结果

function* iterArr(arr) {
  if (Array.isArray(arr)) {
    for (let i = 0; i < arr.length; i++) {
      yield* iterArr(arr[i]);
    }
  } else {
    yield arr;
  }
}
var arr = ['a', ['b', 'c'], ['d', 'e']];
for (var x of iterArr(arr)) {
  console.log(x);
}
var arr = ['a', ['b', ['c', ['d', 'e']]]];
var gen = iterArr(arr);
arr = [...gen]; 
复制代码

参考答案

1682519215(1).png


拓展


众所周知,async 是目前最好的异步方案,是因为 async 写法非常清晰明了,但是能保证其异步的特性,早起没有 async 的时候社区里面就有使用自执行函数+生成器函数+Promise 实现了类 async 的效果,最终也是将这种思想成功的带进了 ES2017。

那么具体是怎么实现的呢,我们来逐步实现一下,首先是异步代码,我们先按照 async 的写法来看一下代码

function req1() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(2), 1000)
  })
}
function req2() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(22), 2000)
  })
}
async function exec() {
  const res1 = await req1();
  const res2 = await req2();
  return res1 + res2;
}
exec().then(console.log) // 22
复制代码

生成器版本是借助了一个第三方的库co来实现了自动执行,co 函数接收一个生成器函数,返回值是一个 promise 对象。

const co = require('co');
function* exec() {
  const res1 = yield req1()
  const res2 = yield req2()
  return res1 + res2
}
co(exec).then(console.log) // 22
复制代码

Generator 函数就是一个异步操作的容器。它的自动执行需要一种机制,当异步操作有了结果,能够自动交回执行权。

两种方法可以做到这一点:(1)回调函数。将异步操作包装成 Thunk 函数,在回调函数里面交回执行权;(2)Promise 对象。将异步操作包装成 Promise 对象,用 then 方法交回执行权。

co 函数库其实就是将两种自动执行器(Thunk 函数和 Promise 对象),包装成一个库。

相关文章
|
3月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
146 19
|
3月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
3月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
5月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
7月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
164 32