【es6复习笔记】生成器(11)

什么是生成器函数

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

生成器函数的基本用法

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

生成器函数的实例

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

html 复制代码
<!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:使用生成器函数实现异步操作

html 复制代码
<!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:使用生成器函数处理回调地狱

html 复制代码
<!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 表达式中使用这些参数。

html 复制代码
<!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>

通过以上实例,你可以看到生成器函数在处理异步操作和避免回调地狱方面的强大能力。希望这些教程对你有所帮助!

相关推荐
SuperherRo5 分钟前
Web开发-JS应用&微信小程序&源码架构&编译预览&逆向调试&嵌套资产&代码审计
前端·javascript·微信小程序·源码·逆向
关二哥拉二胡7 分钟前
Cursor Max:从“代码神器”到“账单刺客”——开发者成本控制指南
前端·javascript
故事与他64512 分钟前
电子文档安全管理系统V6.0接口backup存在任意文件下载漏洞
java·开发语言·前端·javascript·安全·网络安全
小陆猿27 分钟前
前端面试 - 如何理解 防抖和节流?
javascript·面试·前端框架
the_one27 分钟前
《Canvas 炫酷动态粒子连线:从零打造流动星空特效》
前端·javascript·css
杀死一只知更鸟debug39 分钟前
vue2,vue3,vue3 + vite 动态加载图片的方式
前端·javascript·vue.js
YYYYYY020201 小时前
材质及制作笔记
笔记·材质
剪刀石头布啊1 小时前
使用 husky 配置git hooks 提交前校验
javascript
相醉为友2 小时前
001 使用单片机实现的逻辑分析仪——吸收篇
笔记·单片机·嵌入式硬件·fpga开发·嵌入式
Enti7c2 小时前
定时器的定义
javascript