前言

生成器

一、生成器是什么？

生成器就是一个特殊的函数，实现异步编程。格式function *名称(){...}
(这个*靠近function写，靠近名称写，或者两边空格都不靠近均正确)

二、生成器

生成器函数声明比较特殊：特殊在声明用*，而且该函数有iterator实现接口，是迭代器对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function* dr() {console.log("a");}let iterator = dr();console.log(iterator);</script>
</body></html>

在这里插入图片描述

生成器执行用next

        function* dr() {console.log("a");console.log("b");}let iterator = dr();iterator.next();

在这里插入图片描述

生成器函数执行后的返回对象
既然上面说它是迭代器对象，它调用next的工作原理跟迭代器的相似：next每调用一次，指针就往后移动一位；返回的是包含value，done属性的对象。
只不过它的next移动只有函数里设置yield时，才会实现next分层执行（可以理解为yield是函数代码分隔符，下面的代码:yield “111”,yield "222"把代码分成三部分，第一部分是yield "111"及上面，第二部分是yield "111"与yield “222"之间包括yield"222”，第三部分是yield "222"下面）。
否则默认全部为一次执行（即上面的图片执行结果）
（如果对迭代器不熟的，可以看我上篇文章）
next的返回结果的value是yield的值
next调用时，就是每调用一次运行上面所说的分成的部分

	function* dr() {console.log("a");yield "111";console.log("b");yield "222";console.log("c");}let iterator = dr();console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());

在这里插入图片描述

生成器传参（生成器函数传参和next传参）
注意：next传参是改变上一个yield … 的返回结果

	function* dr(arg) {console.log(arg);let one = yield "111";console.log(one);yield "222";console.log("c");}let iterator = dr("aaa");console.log(iterator.next());console.log(iterator.next("bbb"));console.log(iterator.next());

在这里插入图片描述

实例
模拟：1s后获取用户数据，2s后获取订单信息，3s后获取商品信息

		<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function getUsers() {setTimeout(() => {let data = "用户数据";iterator.next(data);}, 1000)}function getOrders() {setTimeout(() => {let data = "订单信息";iterator.next(data);}, 2000)}function getGoods() {setTimeout(() => {let data = "商品数据";iterator.next(data);}, 3000)}function* dr() {let user = yield getUsers();console.log(user);let order = yield getOrders();console.log(order);let good = yield getGoods();console.log(good);}let iterator = dr();iterator.next();</script>
</body></html>