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

没腿的鸟  金牌会员 | 2024-12-29 13:00:23 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 810|帖子 810|积分 2430

什么是生成器函数

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


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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>生成器</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 生成器函数
  11.         function* gen() {
  12.             yield '一只没有耳朵';
  13.             yield '一只没有尾巴';
  14.             yield '真奇怪';
  15.         }
  17.         // 创建迭代器对象
  18.         let iterator = gen();
  20.         // 使用 next() 方法获取值
  21.         console.log(iterator.next()); // { value: '一只没有耳朵', done: false }
  22.         console.log(iterator.next()); // { value: '一只没有尾巴', done: false }
  23.         console.log(iterator.next()); // { value: '真奇怪', done: false }
  24.         console.log(iterator.next()); // { value: undefined, done: true }
  25.     </script>
  26. </body>
  27. </html>
复制代码
实例 2：使用生成器函数实现异步操纵

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>生成器函数实例</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 模拟异步获取数据
  11.         function getUsers() {
  12.             setTimeout(() => {
  13.                 let data = '用户数据';
  14.                 iterator.next(data);
  15.             }, 1000);
  16.         }
  18.         function getOrders() {
  19.             setTimeout(() => {
  20.                 let data = '订单数据';
  21.                 iterator.next(data);
  22.             }, 1000);
  23.         }
  25.         function getGoods() {
  26.             setTimeout(() => {
  27.                 let data = '商品数据';
  28.                 iterator.next(data);
  29.             }, 1000);
  30.         }
  32.         // 生成器函数
  33.         function* gen() {
  34.             let users = yield getUsers();
  35.             let orders = yield getOrders();
  36.             let goods = yield getGoods();
  37.         }
  39.         // 创建迭代器对象并开始执行
  40.         let iterator = gen();
  41.         iterator.next();
  42.     </script>
  43. </body>
  44. </html>
复制代码
实例 3：使用生成器函数处理回调地狱

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>生成器函数实例</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 异步函数
  11.         function one() {
  12.             setTimeout(() => {
  13.                 console.log(111);
  14.                 iterator.next();
  15.             }, 1000);
  16.         }
  18.         function two() {
  19.             setTimeout(() => {
  20.                 console.log(222);
  21.                 iterator.next();
  22.             }, 2000);
  23.         }
  25.         function three() {
  26.             setTimeout(() => {
  27.                 console.log(333);
  28.                 iterator.next();
  29.             }, 3000);
  30.         }
  32.         // 生成器函数
  33.         function* gen() {
  34.             yield one();
  35.             yield two();
  36.             yield three();
  37.         }
  39.         // 创建迭代器对象并开始执行
  40.         let iterator = gen();
  41.         iterator.next();
  42.     </script>
  43. </body>
  44. </html>
复制代码
生成器函数的参数传递

生成器函数可以担当参数，而且可以在 yield 表达式中使用这些参数。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>生成器函数参数</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         function* gen(arg) {
  11.             console.log(arg);
  12.             let one = yield 111;
  13.             console.log(one);
  14.             let two = yield 222;
  15.             console.log(two);
  16.             let three = yield 333;
  17.             console.log(three);
  18.         }
  20.         // 执行生成器函数并传递参数
  21.         let iterator = gen('AAA');
  22.         console.log(iterator.next());
  23.         console.log(iterator.next('BBB'));//next中传入的BBB将作为yield 111的返回结果
  24.         console.log(iterator.next('CCC'));//next中传入的CCC将作为yield 222的返回结果
  25.         console.log(iterator.next('DDD'));//next中传入的DDD将作为yield 333的返回结果
  26.     </script>
  27. </body>
  28. </html>
复制代码
通过以上实例，你可以看到生成器函数在处理异步操纵和避免回调地狱方面的强大能力。盼望这些教程对你有所帮助！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

没腿的鸟

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表