js es6深入应用系列(Generator)

Posted 你永远想象不到,一个光鲜亮丽的Application,有多么

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js es6深入应用系列(Generator)相关的知识,希望对你有一定的参考价值。

前言

generotor 和 普通函数的不同在于function 的时候加了一个*,

是的,我们看到es5的一个陌生关键字,yield,这个是不寻常的,为什么这么说呢?

这个在c#中,很常见的一个关键字,下面就来解释一下js中的。

正文

function* gen() {
	yield "1";
	yield "2"
}
var iterator = gen();
console.log(iterator);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

这个玩意儿如果运行的话,会返回一个Iterator实例, 然后再执行Iterator实例的next()方法, 那么这个函数才开始真正运行,
并把yield后面的值包装成固定对象并返回,直到运行到函数结尾, 最后再返回undefined;

我为什么这么说呢?改一下代码:

function* gen() {
	yield "1";
	console.log(\'123\');
	yield "2";
}
var iterator = gen();
console.log(iterator);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

这个可以看图说话我就不多说了。

下面介绍一下其他的一些特性。

yield*

yield* 表达式用于委托给另一个generator 或可迭代对象。

下面是委托为另一个:generator

function* foo() {
	yield 0;
	yield 1;
}
function* bar() {
	yield \'x\';
	yield* foo();
	yield \'y\';
}
for (let v of bar()) {
	console.log(v);
};

实际上上面就说了可以委托为任何可迭代的对象。

function* g3() {
  yield* [1, 2];
  yield* "34";
  yield* arguments;
}
var iterator = g3(5, 6);
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: "3", done: false }
console.log(iterator.next()); // { value: "4", done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 6, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

return

The return() method returns the given value and finishes the generator.

function* gen() { 
  yield 1;
  yield 2;
  yield 3;
}
const g = gen();
g.next();        // { value: 1, done: false }
g.return(\'foo\'); // { value: "foo", done: true }
g.next();        // { value: undefined, done: true }

throw()

The throw() method resumes the execution of a generator by throwing an error into it and returns an object with two properties done and value.

function* gen() {
	while (true) {
		try {
			yield 42;
		} catch (e) {
			console.log(\'Error caught!\');
		}
	}
}

const g = gen();
g.next();
// { value: 42, done: false }
g.throw(new Error(\'Something went wrong\'));
// "Error caught!"
// { value: 42, done: false }

next

next 分为带参数和不带参数,不带参数的我就不说了,说下带参数的。

function* foo(x) {
	var y = 2 * (yield (x + 1));
	console.log(y)
	var z = yield (y / 3);
	console.log(x);
	console.log(z);
        console.log(y);
	return (x + y + z);
}

var b = foo(5);
console.log(b.next()); // { value:6, done:false }
console.log(b.next(12)); // { value:8, done:false }
console.log(b.next(13)); // { value:42, done:true }

惊喜不惊喜意外不意外?

过程其实也很简单,比如说第二个传入了12。

这个运行过程其实是从第一个yiled 开始运行的,也就是这个12会替换(x + 1)

这样y就等于24了,然后yield (y / 3) 就是8了。

后续也是这样。

应用

<script>
	"use strict";
	function* main() {
		var result = yield request("http://www.filltext.com?rows=10&f={firstName}");
		console.log(result);
		//do 别的ajax请求;
	}
	function request(url) {
		var r = new XMLHttpRequest();
		r.open("GET", url, true);
		r.onreadystatechange = function () {
			if (r.readyState != 4 || r.status != 200) return;
			var data = JSON.parse(r.responseText);
			//数据成功返回以后, 代码就能够继续往下走了;
			it.next(data);
		};
		r.send();
	}
	var it = main();
	it.next();
	console.log("执行到这儿啦");
</script>

我把打印放出来:

其实上面可能存在疑惑的地方,那就是为什么console.log(result);会打印出it.next(data);中data的结果。

其实非常简单,当var result = yield request("http://www.filltext.com?rows=10&f={firstName}");执行完毕的时候,因为没有next,然后就被阻塞了。

那么更具上面next的特性。it.next(data)中的data会替换:yield request("http://www.filltext.com?rows=10&f={firstName}"),那么result的结果就是data。

实现了我们async和await的效果。

以上是关于js es6深入应用系列(Generator)的主要内容,如果未能解决你的问题,请参考以下文章

ES6 系列九:Generator

ES6之Generator 函数的异步应用

深入解析 JavaScript 中 ES6 的 Generator 生成器

学习ES6系列:generator的基本认识和使用

ES6 从入门到精通 # 16:Generator 的应用

ES6 从入门到精通 # 16:Generator 的应用