javascript——generator理解

最近在学习CK5的时候，遇到了一个函数：

function* _getAllUpcastDefinitions( definition ) {
	if ( definition.model.values ) {
		for ( const value of definition.model.values ) {
			const model = { key: definition.model.key, value };
			const view = definition.view[ value ];
			const upcastAlso = definition.upcastAlso ? definition.upcastAlso[ value ] : undefined;

			yield* _getUpcastDefinition( model, view, upcastAlso );
		}
	} else {
		yield* _getUpcastDefinition( definition.model, definition.view, definition.upcastAlso );
	}
}

在这个函数中，遇到了一个function* 以及一个 yield*。在网上搜索了一下，才知道这是一个generator的使用方法。所以记录一下generator的使用。

生成器

什么是生成器呢？生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议。

代码举例

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator(); // "Generator { }"

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

从这里可以看出，生成器是上面的gen,它是通过function* 调用生成的。这个对象调用next()方法可以依次像迭代一样返回值。

生成器实例方法

Generator.prototype.next()

返回一个由 yield表达式生成的值。

Generator.prototype.return()

返回给定的值并结束生成器。

Generator.prototype.throw()

向生成器抛出一个错误

 

生成器调用

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

function* generator(i) {
  yield i;
  yield* anotherGenerator(i);
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20

从上面的例子可以看出，我们可以定义多个生成器函数,并且在函数中调用其他的生成器函数，调用的方式就是

yield* 函数名称

这里只记录生成器的简单用法，它还有很多高级用法，以后再慢慢学习和分析。