JavaScript 中的 Generator 函数及其方法

JavaScript 中的 Generator 函数 是一种特殊的函数类型,它能够中断并恢复执行,这使得它在处理复杂的异步逻辑、协程等场景中非常有用。它的行为与普通的函数不同,因为它可以在执行过程中暂停,允许函数在某个点上"暂停"执行,之后可以继续从暂停点执行。

目录

什么是 Generator 函数?

Generator 函数通过 function* 声明,返回一个特殊的 Generator 对象 ,其核心机制是 yield 关键字。这个对象有一个可以"暂停"并在以后恢复执行的能力。

当调用一个 Generator 函数时,它不会立即执行,而是返回一个 Generator 对象

调用next()函数在每个 yield 语句处暂停。当我们调用 next() 时,它会继续执行到下一个 yield

例子:

javascript 复制代码
function* count() {
  console.log("Start");
  yield 1;
  console.log("Continue");
  yield 2;
  console.log("End");
  yield 3;
}

const counter = count();// 返回 Generator 对象
console.log(counter.next()); // Start 1
console.log(counter.next()); // Continue 2
console.log(counter.next()); // End 3

1.next() 方法

作用
  • next() 是控制 Generator 执行的主要方法,它会恢复 Generator 函数的执行,直到下一个 yield
  • 每次调用 next(),都会返回一个对象 { value, done }
    • value: 当前 yield 表达式的返回值。
    • done: 布尔值,指示生成器是否已完成执行。
用法与返回值
js 复制代码
function* gen() {
  yield 1;
  yield 2;
  return 3;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.next()); // { value: 2, done: false }
console.log(g.next()); // { value: 3, done: true }
console.log(g.next()); // { value: undefined, done: true }
  • g.next() :调用 next() 时,Generator 会继续执行,直到遇到下一个 yield 或函数结束。如果没有 yield,它会直接返回一个 done: true 对象。
参数传递

next() 可以接收一个参数,这个参数会作为上一次 yield 表达式的返回值,传递给生成器。

javascript 复制代码
function* gen() {
  const a = yield 'What is your name?';
  const b = yield 'What is your age?';
  return `${a} is ${b} years old.`;
}

const g = gen();
console.log(g.next());            // { value: 'What is your name?', done: false }
console.log(g.next('Alice'));     // { value: 'What is your age?', done: false }
console.log(g.next(30));          // { value: 'Alice is 30 years old.', done: true }

在上述代码中,第一次 next() 返回一个字符串 'What is your name?'。当我们向生成器传递参数('Alice'30)时,参数会依次传递给 ab,最终返回 "Alice is 30 years old."

3. throw() 方法

作用
  • throw() 方法可以用来在 Generator 函数中抛出错误。
  • 它会中断当前的 yield 并跳到最近的 catch 块中。如果 Generator 中没有 try-catch 语句捕获错误,那么 throw() 会终止执行,并返回一个 done: true 的结果。
用法与返回值
javascript 复制代码
function* gen() {
  try {
    yield 1;
  } catch (err) {
    console.log(err); // 捕获到错误
    yield 2;
  }
  yield 3;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.throw("Oops!")); // "Oops!" { value: 2, done: false }
console.log(g.next()); // { value: 3, done: true }
  • g.throw("Oops!") :在执行到 yield 1 时,抛出一个错误 Oops!,这个错误会被 try-catch 捕获,并在捕获后继续执行 yield 2。如果 throw() 被调用的时机不合适(比如没有 try-catch),生成器将停止执行并返回一个 { value: undefined, done: true } 对象。
没有 catch 时的行为
javascript 复制代码
function* gen() {
  yield 1;
  yield 2;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.throw("Error")); // Error { value: undefined, done: true }

在这个例子中,调用 g.throw() 会导致生成器抛出错误并终止执行,因为没有 catch 语句来捕获该错误。

4. return() 方法

作用
  • return() 用于提前结束 Generator 函数,并返回一个结果。
  • return() 会使得生成器结束执行,并返回 { value, done: true } 对象,done 属性为 true
  • 返回的 value 会作为返回值传递给 return() 调用的地方。
用法与返回值
javascript 复制代码
function* gen() {
  yield 1;
  yield 2;
  return 3;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.return(4)); // { value: 4, done: true }
console.log(g.next()); // { value: undefined, done: true }
  • g.return(4) :这个方法会立即结束生成器,并返回 { value: 4, done: true }。注意:如果在 Generator 函数中调用 return,它会停止 Generator 的执行。

5. next(), throw(), return() 的总结与对比

方法 作用 返回值 适用场景
next() 恢复执行 Generator,直到下一个 yield 或结束 { value: any, done: boolean } 用于继续执行 Generator,并返回下一个 yield 的值。
throw() 在 Generator 中抛出一个错误 { value: any, done: boolean } 用于处理错误,并在 Generator 内部抛出异常。
return() 结束 Generator 函数的执行 { value: any, done: true } 用于提前结束 Generator,并返回结果。

总结

Generator 函数和其方法(next(), throw(), return())提供了对函数执行流程的精确控制。通过 yield 暂停执行,next() 恢复执行,throw() 处理错误,return() 提前结束生成器,这使得 Generator 函数在处理异步编程、协程、流控制等场景中非常有用。掌握这些方法,可以帮助开发者更好地控制异步操作和复杂逻辑的执行过程。

相关推荐
程序员与背包客_CoderZ14 分钟前
C++设计模式——Singleton单例模式
c语言·开发语言·c++·单例模式·设计模式
fanyamin20 分钟前
编程语言的局限
开发语言·python
小猿_0022 分钟前
C语言蓝桥杯组题目
c语言·开发语言·蓝桥杯
小扳23 分钟前
Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:电影院后台管理系统(前后端源码 + 数据库 sql 脚本)
java·前端·数据库·spring boot·mysql·spring·课程设计
田本初23 分钟前
从0-1逐步搭建一个前端脚手架工具并发布到npm
前端·npm·node.js
落笔映浮华丶27 分钟前
C++(进阶) 第1章 继承
开发语言·c++
百香果果ccc37 分钟前
Java中的File和IO流
java·开发语言·log4j
努力更新中43 分钟前
Python浪漫之随机绘制不同颜色的气球
开发语言·python
委婉待续1 小时前
java抽奖系统(一)
java·开发语言
Marshall35721 小时前
Canvas 和 SVG 的高级使用与性能优化
前端·svg·canvas