ES6初步了解生成器

生成器函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同
语法: function * fun(){ }

javascript 复制代码
    function * gen(){
        console.log("hello generator");
    }
    let iterator =gen()
    console.log(iterator)

打印:

我们发现没有打印"hello generator"

我们需要使用到next方法

如果大家对迭代器感兴趣大家可以阅读这篇ES6初步了解迭代器

javascript 复制代码
    function * gen(){
        console.log("hello generator");
    }
    let iterator =gen()
    iterator.next()

我们可以使用yield,可以看作是函数代码的分隔符

javascript 复制代码
    function * gen(){
        console.log(111)
        yield "hello"
        console.log(222)
        yield "generator"
        console.log(333)
        yield "!"
        console.log(444)
    }
    let iterator =gen()
    iterator.next() //111
    iterator.next() //222
    iterator.next() //333
    iterator.next() //444

我们也可以使用for...of来遍历

javascript 复制代码
    function* gen() {
        yield "hello"
        yield "generator"
        yield "!"
    }
    for (let v of gen()) {
        console.log(v)
    }

生成器函数的参数传递

javascript 复制代码
    function* gen(arg) {
        console.log(arg)
        yield 111
        yield 222
        yield 333
    }
    // 执行获取迭代器对象
    let iterator = gen("aaa")
    console.log(iterator.next()) 

next方法可以传入实参

javascript 复制代码
    function* gen(arg) {
        console.log(arg) //AAA
        let one = yield 111
        console.log(one) //BBB
        let two = yield 222
        console.log(two) //CCC
        let three = yield 333
        console.log(three) //DDD
    }
    // 执行获取迭代器对象
    let iterator = gen("AAA")
    console.log(iterator.next())
    // 第二次调next方法传入这个实参作为第一个yield语句的返回结果
    console.log(iterator.next("BBB"))
    // 第三次调next方法传入这个实参作为第二个yield语句的返回结果
    console.log(iterator.next("CCC"))
    // 第四次调next方法传入这个实参作为第三个yield语句的返回结果
    console.log(iterator.next("DDD")) 
    // 以此类推

感谢大家的阅读,如有不对的地方,可以向我指出,感谢大家!

相关推荐
用户479492835691511 分钟前
面试官问 React Fiber,这一篇文章就够了
前端·javascript·react.js
一水鉴天36 分钟前
整体设计 定稿 之23+ dashboard.html 增加三层次动态记录体系仪表盘 之2 程序 (Q199 之2) (codebuddy)
开发语言·前端·javascript
掘金挖土1 小时前
手摸手快速搭建 Vue3 + ElementPlus 后台管理系统模板,使用 JavaScript
前端·javascript
CoderHing1 小时前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
前端·javascript·react.js
哆啦A梦15881 小时前
商城后台管理系统 01 Vue-i18n国际化
前端·javascript·vue.js
期待のcode1 小时前
Vue的安装创建与运行
前端·javascript·vue.js
全栈小51 小时前
【数据库】浙人医携手金仓数据库,打造全国首个多院区异构多活容灾架构
数据库·1024程序员节·金仓
至善迎风2 小时前
Bun:下一代 JavaScript 运行时与工具链
开发语言·javascript·ecmascript·bun
DJ斯特拉2 小时前
Vue工程化
前端·javascript·vue.js
LinDon_2 小时前
【vue2form表单中的动态表单校验】
前端·javascript·vue.js