Generator函数语法

最新推荐文章于 2023-03-02 15:45:52 发布

原创最新推荐文章于 2023-03-02 15:45:52 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了ES6中Generator函数的基础概念、语法特点及其工作原理。重点解释了如何使用yield语句来定义内部状态，next方法的作用及参数传递机制。

Generator函数语法

- 基础概念

基础概念

Generator 函数是 ES6 提供的种异步编程解决方案，语法行为与传统函数完全不同。
执行 Generator 函数会返回个遍历器对象也就是说， Generator 函数除了是状态机，还是个遍历器对象生成函数
返回的遍历器对象可以依次遍历 Generator 函数内部的每个状态。
形式上， Generator 函数是个普通函数，但是有三个特征： function 命令与函数名之间有个星号*：二是函数体内部使用
yield 吾句定义不同的内部状态（“ yield ”在英语里的意思就是“产出“);三是使得指针移向下状态。也就是说，每次调用
next 方法，内指针就从函数头部或上次停下来的地方开始执行直到遇到下一条yield 语句（或 return 语句）为止；换言之
Generator 函数是分段执行的； yield 语句是暂停执行的标记；next 方法可以恢复执行；

function* GeneratorExam() { 
	yield ’hello1’; 
	yield ’hello2’; 
	return ’helloending’; 
}
var suchAs = GeneratorExam() ;

上边代码定义了一个geerator函数 GeneratorExam ，内部有三个状态hello1,hello2,helloending(return语句会结束执行)；

suchAs.next(); //{value:'hello1',done:false}

suchAs.next(); //{value:'hello2',done:false}

suchAs.next(); //{value:'helloending',done:true}

suchAs.next(); //{value:undefined,done:true}

上边代码一共调用了四次next()方法

第一次调用， Generator 函数开始执行；直到遇到第 yield 语句为止 next 方法返回一个对象，它的 value
属性就是当前 yield 吾句的值 hello1, done 属性的值 false 表示遍历还没有结束。
第二次调用， Generator 函数从上次 yield 语句停下的地方，一直执行到下 yield语句。next 方法返回的对象的
value 属性就是当前 yield 语句的值hello2, done 属性false 表示遍历还没有结束。
第三次调用， Generator 函数从上次 yield 语句停下的地方，一直执行到 return 语句（如果没有 return 语句
就执行到函数结束）； next 方法返回的对象的 value 属性就是紧跟在 return 语句后面的表达式的值（如果没有 return
吾句 value 属性的值为 undefined) done 属性的值 true 表示遍历己经结束。
第四次调用，此时Generator函数已经运行完毕，next方法返回对象的value值为undefined，done为true,以后再调用这个方法，都是这个值。
总结一下，调用Generator函数返回一个遍历器对象，代表generator函数的内部指针，以后每次调用遍历器对象的next()方法，就会返回一个有value和done两个属性的对象。value代表当前的内部状态的值，done代表遍历是否结束。

*星号的位置

ES6没有规定function关键字和函数名之间的*星号写在哪个位置，所以以下写法都能通过。

function * such (x , y) { } 
function *such (x, y) {} 
function* such (x, y) { } 
function*such (x, y) {}

next方法的参数

yield 语句本身没有返回值，或者说总是返回 undefined next 方法可以带有个参数，该参数会被当作上一条 yield 语句的返回值

function* f () {
	for(var i = O; 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 函数，如果 next 方法没有参数，每次运行到 yield 吾句时，变量
reset 的值总是 undefined 。当 next 方法带有一个参数 true 时，当前的变量 reset 就被重置为这个参数（即
true ），因而会等于－，下轮循环就从－开始递增。
这个功能有很重要的语法意义 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() //{value:6, done:false}
a.next () //{value:NaN, done:false}
a.next () //{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 方法的时候不带参数，导致 y的值等于 *undefined (即NaN ），除以3 以后还是 NaN
，因此返回对象的 value 属性也等于 NaN，第三次运行 Next方法的时候不带参数所以等于 undefined ，返回对象的
value 属性等于 + NaN + undefined, 为NaN。
如果向口next 方法提供参数，返回结果就完全不一样了上面的代码第次调用b的next 方法时，返回x+1的值6,第二次调用next()方法，将第一次yeild语句值设为12，因此y=24,返回y/3为8；第三次调用next();将上一次yeild设置为13,因此z为13；x=5;y=24;return为42；

tips

由于next方法的参数表示上一条yield的返回值，因此第一次使用next（）方法传参时无效的；V8引擎直接忽略第一次next方法传参；
当然如果想在第一次调用方法就能输入值，可以在Generator函数外面再包一层。

function wrapper(generatorFunction) { 
	return function ( ... args) { 
		let generatorObject = generatorFunction( ... args) ; 
		generatorObject.next() ; 
		return generatorObject;
	};
}

const wrapped= wrapper(function* () { 
	console.log(First put ${yield}）；
	return ’ DONE ’ ;
}）
wrapped().next('hello!') //First put hello!

参考：
书籍：《ES6标准入门》；