摘要:函数从暂停状态到恢复运行,它的上下文状态是不变的。也就是说,可以在函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。循环循环可以自动遍历函数时生成的对象,且此时不再需要调用方法。
基本概念
状态机,封装了多个内部状态;
返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态
带*号,yeild表达式定义不同的内部状态;
调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是遍历器对象;
Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行;
暂停标志
next()方法允许逻辑
遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值;
下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式;
没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值;
如果该函数没有return语句,则返回的对象的value属性值为undefined;
yield表达式只能用在 Generator 函数里面,用在其他地方都会报错。
var arr = [1, [[2, 3], 4], [5, 6]]; var flat = function* (a) { a.forEach(function (item) { if (typeof item !== "number") { yield* flat(item); } else { yield item; //forEach()的参数是一个普通函数使用yield会报错,可以使用for循环解决这个问题 } }); }; for (var f of flat(arr)){ console.log(f); }
使用for循环改正
var arr = [1, [[2, 3], 4], [5, 6]]; var flat = function* (a) { var length = a.length; for (var i = 0; i < length; i++) { var item = a[i]; if (typeof item !== "number") { yield* flat(item); } else { yield item; } } }; for (var f of flat(arr)) { console.log(f); }// 1, 2, 3, 4, 5, 6
yield表达式如果用在另一个表达式之中,必须放在圆括号里面;
yield表达式用作函数参数或放在赋值表达式的右边,可以不加括号
与Iterator的关系可以把 Generator 赋值给对象的Symbol.iterator属性,从而使得该对象具有 Iterator 接口
var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myIterable] // [1, 2, 3]next()方法的参数
yield表达式本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。
function* f() { for(var i = 0; true; i++) { var reset = yield i; if(reset) { i = -1; } } } var g = f(); g.next() // { value: 0, done: false } g.next() // { value: 1, done: false } g.next(true) // { value: 0, done: false }
Generator 函数从暂停状态到恢复运行,它的上下文状态(context)是不变的。通过next方法的参数,就有办法在 Generator 函数开始运行之后,继续向函数体内部注入值。也就是说,可以在 Generator 函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。
分析以下代码允许的结果:
function* foo(x) { var y = 2 * (yield (x + 1)); var z = yield (y / 3); return (x + y + z); } var a = foo(5); a.next() // Object{value:6, done:false} a.next() // Object{value:NaN, done:false} a.next() // Object{value:NaN, done:true} var b = foo(5); b.next() // { value:6, done:false } b.next(12) // { value:8, done:false } b.next(13) // { value:42, done:true }
next()传参,参数代表上一次yeild表达式返回的值,因此第一次使用next()传参是无效的;
function* dataConsumer() { console.log("Started"); console.log(`1. ${yield}`); console.log(`2. ${yield}`); return "result"; } let genObj = dataConsumer(); genObj.next(); // Started genObj.next("a") // 1. a genObj.next("b") // 2. b
如果想第一次调用next()方法就能够输入值,可以在Genrator函数外再包一层
function wrapper(generatorFunction) { return function (...args) { let generatorObject = generatorFunction(...args); generatorObject.next(); return generatorObject; }; } const wrapped = wrapper(function* () { console.log(`First input: ${yield}`); return "DONE"; }); wrapped().next("hello!")// First input: hello!
上述代码在wrapper函数中,首先调用一次next方法,再返回遍历器对象。当用户自己调用next方法时,看起来就像是第一次调用,但实际上,这是第二次调用next方法。
for...of循环for...of循环可以自动遍历 Generator 函数时生成的Iterator对象,且此时不再需要调用next方法。
function* foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; } for (let v of foo()) { console.log(v); } // 1 2 3 4 5
这里需要注意,一旦next方法的返回对象的done属性为true,for...of循环就会中止;
Generator给对象添加Iterator方法一
function* objectEntries(obj) { let propKeys = Reflect.ownKeys(obj); for (let propKey of propKeys) { yield [propKey, obj[propKey]]; } } let jane = { first: "Jane", last: "Doe" }; for (let [key, value] of objectEntries(jane)) { console.log(`${key}: ${value}`); } // first: Jane // last: Doe
方法二将 Generator 函数加到对象的Symbol.iterator属性上面。
function* objectEntries() { let propKeys = Object.keys(this); for (let propKey of propKeys) { yield [propKey, this[propKey]]; } } let jane = { first: "Jane", last: "Doe" }; jane[Symbol.iterator] = objectEntries; for (let [key, value] of jane) { console.log(`${key}: ${value}`); } // first: Jane // last: Doe
【完】
作者简介:郑佳欢,芦苇科技web前端实习生,公司作品:口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 访问 www.talkmoney.cn 了解更多
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104506.html
摘要:返回的遍历器对象,可以依次遍历函数内部的每一个状态。由于函数就是遍历器生成函数,因此可以把赋值给对象的属性,从而使得该对象具有接口。函数从暂停状态恢复运行,它的上下文状态时不变的。从语义上讲,第一个方法用来启动遍历器对象,所以不用带有参数。 基本概念 Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。Generator函数有多种理解角度。语法上,首先...
摘要:以下展示它是如何工作的函数使用构造函数创建一个新的对象,并立即将其返回给调用者。在传递给构造函数的函数中,我们确保传递给,这是一个特殊的回调函数。 本系列文章为《Node.js Design Patterns Second Edition》的原文翻译和读书笔记,在GitHub连载更新,同步翻译版链接。 欢迎关注我的专栏,之后的博文将在专栏同步: Encounter的掘金专栏 知乎专栏...
摘要:如果你已经理解基础可以直接跳过这部分和语法部分,直接看深入理解的部分。的参数可以传入一个参数,来作为上一次的表达式的返回值,就像我们上面说的会让等于。 这篇文章旨在帮你真正了解Generator,文章较长,不过如果能花时间耐心看完,相信你已经能够完全理解generator 为什么要用generator 在前端开发过程中我们经常需要先请求后端的数据,再用拿来的数据进行使用网页页面渲染等操...
摘要:最后,调用这个函数,得到一个遍历器对象并赋值给变量。值得注意的是如果函数内部没有部署代码块,那么遍历器对象的方法抛出的错误,将被外部代码块捕获。 本文已同步至我的个人主页。欢迎访问查看更多内容!如有错误或遗漏,欢迎随时指正探讨!谢谢大家的关注与支持! 一、什么是Generator函数 Generator函数是ES6标准中提出的一种异步编程的解决方案。这种函数与普通函数最大的区别在于它可...
摘要:语法上,首先可以把它理解成,函数是一个状态机,封装了多个内部状态。返回的遍历器对象,可以依次遍历函数内部的每一个状态。 写在前面: 这一篇是关于ES6中生成器函数相关总结和理解... Generator函数的定义 在阮一峰老师的书中的说法是: Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Gener...
阅读 2958·2021-11-16 11:42
阅读 3619·2021-09-08 09:36
阅读 904·2019-08-30 12:52
阅读 2467·2019-08-29 14:12
阅读 723·2019-08-29 13:53
阅读 3562·2019-08-29 12:16
阅读 627·2019-08-29 12:12
阅读 2452·2019-08-29 11:16