JS函数如何定义生成器函数_JS生成器函数定义与使用案例

生成器函数是JavaScript中可暂停和恢复执行的特殊函数,通过function*定义并返回迭代器对象,使用yield逐步返回值,适合处理惰性求值与异步流程。

js函数如何定义生成器函数_js生成器函数定义与使用案例

在JavaScript中,生成器函数是一种特殊类型的函数,它可以在执行过程中暂停和恢复,通过 yield 关键字返回多个值。这种特性使得生成器非常适合处理惰性求值、迭代大量数据或控制异步流程。

什么是生成器函数

生成器函数不会一次性运行完毕,而是可以在执行中途暂停,之后再从中断处继续执行。调用生成器函数时,它并不立即执行函数体,而是返回一个迭代器对象(Iterator),通过调用该对象的 next() 方法来逐步推进函数的执行。

如何定义生成器函数

定义生成器函数有以下几种方式:

1. 使用 function* 语法(最常见)

在函数关键字后加一个星号 *,即可定义一个生成器函数。

function* myGenerator() {  yield '第一项';  yield '第二项';  yield '第三项';}

2. 作为对象中的方法

在对象字面量或类中,也可以使用简写形式定义生成器方法。

const obj = {  * generatorMethod() {    yield 1;    yield 2;  }};

3. 通过 GeneratorFunction 构造器(不常用)

类似于 new Function,可以动态创建生成器函数,但实际开发中很少使用。

生成器函数的基本使用案例

下面通过几个典型例子展示生成器的实际用途。

案例1:简单值的逐步返回

function* count() {  yield 1;  yield 2;  yield 3;}

const counter = count();console.log(counter.next()); // { value: 1, done: false }console.log(counter.next()); // { value: 2, done: false }console.log(counter.next()); // { value: 3, done: false }console.log(counter.next()); // { value: undefined, done: true }

案例2:惰性生成无限序列

利用生成器可以按需生成数据,避免一次性计算所有值。

function* fibonacci() {  let a = 0, b = 1;  while (true) {    yield a;    [a, b] = [b, a + b];  }}

const fib = fibonacci();console.log(fib.next().value); // 0console.log(fib.next().value); // 1console.log(fib.next().value); // 1console.log(fib.next().value); // 2console.log(fib.next().value); // 3

案例3:遍历自定义数据结构

为对象添加生成器方法,使其可被 for…of 遍历。

class TaskList {  constructor() {    this.tasks = [];  }

add(task) {this.tasks.push(task);}

  • [Symbol.iterator]() {for (let task of this.tasks) {yield task.toUpperCase();}}}

const list = new TaskList();list.add('学习JS');list.add('练习编码');

for (let task of list) {console.log(task);}// 输出:// 学习JS// 练习编码

yield 和 return 的区别

在生成器中,yield 是暂停并返回值,后续可继续执行;而 return 是结束生成器,并设置 done: true。return 的值也会出现在 value 中。

function* example() {  yield 'a';  return 'end';  yield 'b'; // 不会被执行}

const it = example();console.log(it.next()); // { value: 'a', done: false }console.log(it.next()); // { value: 'end', done: true }

基本上就这些。生成器函数虽然不常直接用于日常业务逻辑,但在实现高级迭代逻辑、状态机或配合 async/await(背后原理就是生成器+Promise)时非常有用。理解其工作机制有助于深入掌握 JavaScript 的异步编程模型。

以上就是JS函数如何定义生成器函数_JS生成器函数定义与使用案例的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1535402.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JS如何实现图表绘制_JavaScript结合Canvas或SVG绘制图表方法教程
上一篇 2025年12月21日 02:25:04
JS动画效果怎么实现_JS前端动画效果实现与JS动画库使用
下一篇 2025年12月21日 02:25:17

相关推荐

发表回复

登录后才能评论
关注微信