ES6 中的生成器函数

最新推荐文章于 2024-09-06 22:20:29 发布

C20001206

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量36

点赞数

分类专栏： es6 文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/C20001206/article/details/132201457

版权

es6 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.概念：

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同，生成器函数就是一种特殊的函数

2.写法：

        // 生成器函数的声明
        function * gen() {
            // 函数体
        }

注意：这里的【*】号既可以靠左也可靠右，也可以在中间，没有强制要求

3.生成器函数的打印

3.1 代码展示：

    <script>
        // 生成器函数的声明
        function * gen() {
            console.log('我是生成器函数')
        }

        let iterator = gen()
        console.log(iterator)
    </script>

3.2 打印结果：

3.3 从图中的打印结果可以看出，打印生成器函数时并没有调用里面的代码，根据打印结果可以看到生成器对象中又一个名为 next 的方法，通过 next 方法就可以执行里面的代码了

4.next 方法

4.1 理解：生成器函数对象通过调用自身的 next 方法实现自身函数的执行

4.2 代码展示：

<script>
        // 生成器函数的声明
        function * gen() {
            console.log('我是生成器函数')
        }

        let iterator = gen()
        iterator.next()
    </script>

4.3 执行结果打印：

5.yield 语句

5.1 理解：yield 语句可以算作函数代码的分隔符，可以将函数代码切分成几块，例如：三个yield 语句可以将代码切分成四块

5.2 代码展示：

    <script>
        // 生成器函数的声明
        function * gen() {
            console.log(111)
            yield '我是 yield 分割符1'
            console.log(222)
            yield '我是 yield 分割符2'
            console.log(333)
            yield '我是 yield 分割符3'
            console.log(444)
        }

        let iterator = gen()
        iterator.next()
    </script>

5.3 注意：生成器函数调用一次 next 方法就会执行第一块函数体，第二次调用 next 方法就会调用第二块函数体，依次类推

5.4 打印每次调用 next 方法的返回值：

5.4.1代码展示

     <script>
        // 生成器函数的声明
        function * gen() {
            yield '我是 yield 分割符1'
            yield '我是 yield 分割符2'
            yield '我是 yield 分割符3'
        }

        let iterator = gen()
        console.log(iterator.next())
        console.log(iterator.next())
        console.log(iterator.next())
        console.log(iterator.next())
    </script>

5.4.2 打印结果

6.生成器函数参数

6.1 整体传参

    <script>
        // 生成器函数的声明
        function * gen(arg) {
            console.log(arg)
            yield '我是 yield 分割符1'
            yield '我是 yield 分割符2'
            yield '我是 yield 分割符3'
        }

        let iterator = gen('AAA')   
        console.log(iterator.next())  // AAA
       
    </script>

6.2 使用 next 方法传参

next 方法传参，第二个next 方法传递的参数就作为上一个 yield 语句的返回值，以此类推

代码展示：

    <script>
        // 生成器函数的声明
        function * gen(arg) {
            console.log(arg)
            let one = yield '我是 yield 分割符1'
            console.log(one)
            let two = yield '我是 yield 分割符2'
            console.log(two)
            let three = yield '我是 yield 分割符3'
            console.log(three)
        }

        let iterator = gen('AAA')
        console.log(iterator.next())
        console.log(iterator.next('BBB'))
        console.log(iterator.next('CCC'))
        console.log(iterator.next('DDD'))
    </script>

运行结果：

7.使用生成器函数模拟获取数据

    <script>
        // 模拟获取 用户数据 订单数据 商品数据
        function* gen() {
            let users = yield getUser()
            console.log(users)
            let order = yield getOrder()
            console.log(order)
            let product = yield getProduct()
            console.log(product)
        }


        // 定义一个函数模拟一秒后获取用户数据
        function getUser() {
            setTimeout(() => {
                let data = '用户数据'
                iterator.next(data)
            }, 1000)
            // 再次调用 next 方法并传递参数

        }

        // 定义一个函数模拟一秒后获取订单数据
        function getOrder() {
            setTimeout(() => {
                let data = '订单数据'
                iterator.next(data)
            }, 1000)
            // 再次调用 next 并传递参数
        }

        // 定义一个函数模拟一秒后获取商品数据
        function getProduct() {
            setTimeout(() => {
                let data = '商品数据'
                iterator.next(data)
            }, 1000)
        }

        // 定义一个变量接收生成器函数对象
        let iterator = gen()
        iterator.next()

    </script>