ES6 Generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。

形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是"产出")。

javascript 复制代码
function* generatorFunction() {
  yield 'Hello';
  yield 'World';
  yield '!';
}
 
// 创建一个迭代器对象
const iterator = generatorFunction();

Generator 函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用 Generator 函数后,该函数并不执行,必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield表达式(或return语句)为止。换言之,Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。

javascript 复制代码
// 调用迭代器的next()方法获取值
console.log(iterator.next()); // { value: 'Hello', done: false }
console.log(iterator.next()); // { value: 'World', done: false }
console.log(iterator.next()); // { value: '!', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

总结:
调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。

ES6 没有规定,function关键字与函数名之间的星号,写在哪个位置。这导致下面的写法都能通过。

javascript 复制代码
function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }

由于 Generator 函数仍然是普通函数,所以一般的写法是第三种,即星号紧跟在function关键字后面。

相关推荐
朱程14 分钟前
写给自己的 LangChain 开发教程(一):Hello world & 历史记录
前端·人工智能
luckyCover16 分钟前
js基础:手写call、apply、bind函数
前端·javascript
Dragon Wu1 小时前
前端 下载后端返回的二进制excel数据
前端·javascript·html5
北海几经夏1 小时前
React响应式链路
前端·react.js
晴空雨2 小时前
React Media 深度解析:从使用到 window.matchMedia API 详解
前端·react.js
一个有故事的男同学2 小时前
React性能优化全景图:从问题发现到解决方案
前端
探码科技2 小时前
2025年20+超实用技术文档工具清单推荐
前端
Juchecar2 小时前
Vue 3 推荐选择组合式 API 风格(附录与选项式的代码对比)
前端·vue.js
uncleTom6662 小时前
# 从零实现一个Vue 3通用建议选择器组件:设计思路与最佳实践
前端·vue.js
影i2 小时前
iOS WebView 异步跳转解决方案
前端