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关键字后面。

相关推荐
r0ad15 分钟前
读诗的时候我却使用了自己研发的Chrome元素截图插件
前端·javascript·chrome
IT_陈寒1 小时前
React性能优化实战:这5个Hooks技巧让我的应用快了40%
前端·人工智能·后端
江天澄1 小时前
HTML5 中常用的语义化标签及其简要说明
前端·html·html5
知识分享小能手1 小时前
jQuery 入门学习教程,从入门到精通, jQuery在HTML5中的应用(16)
前端·javascript·学习·ui·jquery·html5·1024程序员节
美摄科技1 小时前
H5短视频SDK,赋能Web端视频创作革命
前端·音视频
七号练习生.c2 小时前
JavaScript基础入门
开发语言·javascript·ecmascript
黄毛火烧雪下2 小时前
React Native (RN)项目在web、Android和IOS上运行
android·前端·react native
fruge2 小时前
前端正则表达式实战合集:表单验证与字符串处理高频场景
前端·正则表达式
baozj2 小时前
🚀 手动改 500 个文件?不存在的!我用 AST 撸了个 Vue 国际化神器
前端·javascript·vue.js
用户4099322502122 小时前
为什么Vue 3的计算属性能解决模板臃肿、性能优化和双向同步三大痛点?
前端·ai编程·trae