【ES6复习笔记】生成器（11）

什么是生成器函数

生成器函数是一种特殊的函数，它可以在执行过程中暂停并保存当前状态，然后在需要时恢复执行。生成器函数通过 yield 关键字来实现暂停和恢复执行的功能。

生成器函数的基本用法

定义生成器函数：使用 function* 关键字来定义生成器函数。
使用 yield 关键字：在生成器函数中使用 yield 关键字来返回一个值，并暂停函数的执行。
创建迭代器对象：通过调用生成器函数来创建一个迭代器对象。
使用 next() 方法：使用迭代器对象的 next() 方法来恢复生成器函数的执行，并获取下一个值。

生成器函数的实例

实例 1：基本的生成器函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生成器</title>
</head>
<body><script>// 生成器函数function* gen() {yield '一只没有耳朵';yield '一只没有尾巴';yield '真奇怪';}// 创建迭代器对象let iterator = gen();// 使用 next() 方法获取值console.log(iterator.next()); // { value: '一只没有耳朵', done: false }console.log(iterator.next()); // { value: '一只没有尾巴', done: false }console.log(iterator.next()); // { value: '真奇怪', done: false }console.log(iterator.next()); // { value: undefined, done: true }</script>
</body>
</html>

实例 2：使用生成器函数实现异步操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生成器函数实例</title>
</head>
<body><script>// 模拟异步获取数据function getUsers() {setTimeout(() => {let data = '用户数据';iterator.next(data);}, 1000);}function getOrders() {setTimeout(() => {let data = '订单数据';iterator.next(data);}, 1000);}function getGoods() {setTimeout(() => {let data = '商品数据';iterator.next(data);}, 1000);}// 生成器函数function* gen() {let users = yield getUsers();let orders = yield getOrders();let goods = yield getGoods();}// 创建迭代器对象并开始执行let iterator = gen();iterator.next();</script>
</body>
</html>

实例 3：使用生成器函数处理回调地狱

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生成器函数实例</title>
</head>
<body><script>// 异步函数function one() {setTimeout(() => {console.log(111);iterator.next();}, 1000);}function two() {setTimeout(() => {console.log(222);iterator.next();}, 2000);}function three() {setTimeout(() => {console.log(333);iterator.next();}, 3000);}// 生成器函数function* gen() {yield one();yield two();yield three();}// 创建迭代器对象并开始执行let iterator = gen();iterator.next();</script>
</body>
</html>

生成器函数的参数传递

生成器函数可以接受参数，并且可以在 yield 表达式中使用这些参数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生成器函数参数</title>
</head>
<body><script>function* gen(arg) {console.log(arg);let one = yield 111;console.log(one);let two = yield 222;console.log(two);let three = yield 333;console.log(three);}// 执行生成器函数并传递参数let iterator = gen('AAA');console.log(iterator.next());console.log(iterator.next('BBB'));//next中传入的BBB将作为yield 111的返回结果console.log(iterator.next('CCC'));//next中传入的CCC将作为yield 222的返回结果console.log(iterator.next('DDD'));//next中传入的DDD将作为yield 333的返回结果</script>
</body>
</html>