ES6 语法详解(Generator函数)

最新推荐文章于 2024-09-21 20:29:56 发布

十六夜之彼岸舞

最新推荐文章于 2024-09-21 20:29:56 发布

阅读量188

点赞数 1

文章标签： java javascript js vue lambda

本文链接：https://blog.csdn.net/flowerStream/article/details/119771157

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        /**
         * Generator函数
         * 1. ES6提供的解决异步编程方案之一
         * 2. Generator函数是一个状态机,内部封装了不同状态的数据
         * 3. 用来生成遍历器对象
         * 4. 可以暂停函数(惰性求值), yield 可暂停 , next 方法可以启动, 每次返回的是yield后的表达式结果
         * 特点:
         * 1. function 与函数名之间有一个星号
         * 2. 内部使用yield表达式来定义不同的状态
         */
        // 列如
        /* 
        function* generatorFun(){
            let result = yield 'hello'
            yield 'generator'
        } */
        /**
         * 3. generator 函数返回的是指针对象(接之前的iterator),而不会执行函数内部逻辑
         * 4. 调用next方法函数内部逻辑开始执行,遇到yield表达式停止,返回{value: yield后的表达式结果/undefined, done:如果后面还有yield返回false,否则返回true}
         * 5. 再次调用next方法会从上一次停止时的yield处开始,直到最后
         * 6. yield语句返回结果通常为undefined,当调用next方法时传参内容会作为启动时yield语句的返回值
         */
        
        // 使用generator函数
        function* generatorFunction(){
            // 开始执行函数
            console.log('function start execute!')
            // 第一次暂停返回
            // 定义的params不是用于接收yield的返回值的,而是接收调用next方法时传入的参数的
            let params = yield 'first yield'
            console.log(params)
            // 函数执行中
            console.log('function executing!')
            // 第二次暂停返回
            yield 'second yield'
            // 函数执行完成
            console.log('function stop')
            return 'x stop'
        }
        
        // 调用generator函数,函数并不会开始执行,而是会返回一个调用指针
        let point = generatorFunction()
        
        // 第一次调用next方法时开始执行,执行到调用yield的时候暂停,并返回yield后的代码执行结果或表达式结果,如果没有结果就是undefined
        // {value:值|undefined,done:true|false}
        let firstValue = point.next()
        console.log(firstValue)
        
        // 当yield暂停返回后如果要继续执行,就需要再次调用next函数
        // 调用next传入参数
        let secondValue = point.next({username: 'flower'})
        console.log(secondValue)
        
        // 再次调用next 因为后面没有yield了,所以返回的是return的值
        let threeValue = point.next()
        console.log(threeValue)
        
        /**
         * 对象 默认是不可以使用for of 遍历的
         * 如果想要使用for of遍历 需要手动部署 iterator 函数
         */
        // 定义对象
        let obj = {
            username: 'flower',
            age: 18,
            sex: 'man'
        }
        // 手动部署iterator接口
        obj[Symbol.iterator] = function* (){
            yield this.username
            yield this.age
            yield this.sex
        }
        // 使用for of遍历
        for (let item of obj) {
            console.log(item)
        }
        
    </script>
</html>

作者：彼岸舞

时间：2021\08\16

内容关于：前端知识库

本文属于作者原创,未经允许,禁止转发