• 12.生成器


    生成器

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

    //生成器其实就是一个特殊的函数
    
    //异步编程  纯回调函数  
    function * gen(){
        console.log("hello generator");
    }
    
    let iterator = gen();
    console.log(iterator);//gen{} object
    iterator.next();//"hello generator"
    
    //函数代码的分隔符
    function * gen1(){
        console.log(111);
        yield '一直没有耳朵';
        console.log(222);
        yield '一直没有尾巴';
        console.log(333);
        yield '真奇怪';
        console.log(444);
    }
    
    let iterator = gen1();
    iterator.next();//"111"
    iterator.next();//"222"
    iterator.next();//"333"
    iterator.next();//"444"
    
    //遍历
    for(let v of gen()){
        console.log(v);
    }
    //'一直没有耳朵'
    //'一直没有尾巴'
    //'真奇怪'
    
    
     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}
    

    生成器函数参数

    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());//AAA {value:111,done:false}
    //next方法可以传入实参
     console.log(iterator.next('BBB'));//BBB {value:222,done:false}
     console.log(iterator.next('CCC'));//CCC {value:333,done:false}
     console.log(iterator.next('DDD'));//{value:undefined,done:true}
    
    

    生成器函数实例

    实例一:
    //异步编程 文件操作 网络操作(ajax,request) 数据库操作
    //1s后控制台输出 111 ,2s后输出 222, 3s后输出 333
    
    function one(){
        setTimeout(()=>{
            console.log(111);
            iterator.next()
        },1000)
    }
    function two(){
        setTimeout(()=>{
            console.log(222);
            iterator.next()
        },1000)
    }
    function three(){
        setTimeout(()=>{
            console.log(333);
            iterator.next()
        },1000)
    }
    function*gen(){
        yield one();
        yield two();
        yield three();
    }
    //调用生成器函数
    let iterator = gen();
    iterator.next();
    //111
    //222
    //333
    
    
    
    实例二:
    //模拟获取 用户数据 订单数据 商品数据
    function getUsers(){
        setTimeout(()=>{
            let data = '用户数据';
            //调用next方法,并且将数据传入
            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();
        console.log(users);
        let orders = yield getOrders();
        console.log(orders);
        let goods = yield getGoods();
        console.log(goods);
    }
    
    //调用生成器函数
    let iterator = gen();
    iterator.next();
    
  • 相关阅读:
    js中有趣的闭包(closure)
    js常见函数汇总
    js时间处理
    一些JavaScript的技巧、秘诀和最佳实践
    js创建对象的6种方式
    js数组常用方法汇总
    左右点击分页方法
    dedecms 添加自定义图字段,调用时出错
    js判断PC端与移动端跳转
    php验证码
  • 原文地址:https://www.cnblogs.com/AaronNotes/p/14366838.html
Copyright © 2020-2023  润新知