Generator函数的语法和应用

更新日期: 2019-06-06阅读量: 1093标签: 函数

基本概念

状态机,封装了多个内部状态;

返回一个遍历器对象,通过改对象可以一次遍历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前端实习生,公司作品:口红挑战网红小游戏、服务端渲染官网。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/3571

js中(function(){…})()立即执行函数写法理解

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

玩转Js函数式编程

最近和一些同学讨论了函数式编程,很多同学总觉得听起来很高大上,但用起来却无从下手。于是我抽时间捋了捋,将平时工作中用到的函数式编程案例和思想整理了出来

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

JS高阶编程技巧--惰性函数

在vue、react等框架大量应用之前,我们需要使用jQuery或者原生js来操作dom写代码,在用原生js进行事件绑定时,我们可以应用DOM2级绑定事件的方法,即:元素.addEventListener(),因为兼容性,还有:

浅析js中的纯函数、高阶函数、记忆函数、偏函数

上周分享文档中遇到几个关键名称,纯函数、高阶函数、记忆函数、偏函数....,这里做一下解析与举例,纯函数是函数式编程中非常重要的一个概念,简单来说,就是一个函数的返回结果只依赖于它的参数

JS函数提升和变量提升

函数声明(function declaration),通过function 关键字,functionName函数名,arg参数(可选)定义的函数。函数表达式: 将函数声明赋值给一个变量,这个表达式叫做函数表达式

js构造函数

JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。在我们平时工作中,经常会需要我们创建一个对象,而我们更多的是使用对像直接量,直接创建

浅析js的工厂函数、构造函数

首先,说下工厂函数。顾名思义,就好比一个工厂一样,可以批量制造某种类型的东西。其实说白了就是封装了个方法减少重复工作,相信稍微有点码龄的人都懂。上代码:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!