zoukankan      html  css  js  c++  java
  • 聊聊ES6中的generator

    generator
    generator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但函数执行中间可以停止。

    ES6定义generator标准的哥们借鉴了Python的generator的概念和语法。
    话说回来,generator有什么用呢,让我们通过几个函数来看一看它的作用:

    //普通函数——一路到底
    function show() {
         alert('a');
         alert('b');
    }
    show();

    这个函数执行后会弹出a 和 弹出b,那么,我们能不能让他在 弹出a之后停下呢,下面就需要借助我们的generator函数了。

        //generatro函数——中间能停
        function *show() {
          alert('a');
          
          alert('b');
        }
        show();


    我们发现,这个函数名字前面 有个 * ,这就是generator函数的特点,当然了,*可以和函数名贴在一起,可以和function贴在一起,也可以谁都不贴,直接放中间,就是不能连起来写,像这种

        function*show() {
          alert('a');
    
          alert('b');
        }
        show();


    现在generator函数有了,你得告诉它在哪停呀,有个东西叫 yield,又到了ask开心学英语时间,yield翻译过来有屈服、投降、生产等意思,在咱们函数里,取“放弃”的意思,简单理解为暂时放弃控制权,等过一会再把控制权还给我。

        //generatro函数——中间能停
        function*show() {
          alert('a');
    
          yield;
          
          alert('b');
        }
        show();

    我们运行上面函数的时候发现,哎,函数没有执行,也没有报错,这是咋回事呢?

    这也是generator和普通函数的区别,当函数执行的时候,并不会执行函数里面的内容,而是创建了一个generator对象。

        //generatro函数——中间能停
        function *show() {
          alert('a');
    
          yield;  //放弃、暂停
    
          alert('b');
        }
    
        let genObj = show();
        console.log(genObj); //这里面有个特别重要的方法
        genObj.next();      //对,就是这里写到的next()方法

    这里代码执行的时候,会弹出a,我们在后面再写一个 next ,这样执行的时候,会弹出a和b,说白了就是踹一脚走一步。

    在这里大家可能会奇怪了,我现在知道了generator配合yield可以让函数走走停停,但我为什么要让它停呢,其实很简答,就像我们平时坐出租车会让师傅停下来等我们忙活其他的事,事情忙完之后再让师傅继续开一样。generator和yield特别适用于请求数据的场景,下面看代码:

        function 函数(){
          //代码
          ajax(xxx,function(){
            ///代码...
          })
        }


    正常来讲,我们想用到请求来的一些数据,那么就需要我们将用数据的代码放在ajax请求成功之后, 然后就导致了我们所谓的回调函数,回调里面还有回调,最后产生了一大堆代码。

        function *函数(){
          //代码
          yield  ajax(xxx)
          
          ///代码...
        }


    而如果是generator函数,我们可以在请求数据的时候,可以让函数暂停,等请求结束之后,函数再接着去执行,这样就不用写成回调的那种方式。

    上面两段代码,我们可以看出来,普通函数涉及到异步操作的时候,我们只能通过回调来写,但在generator函数里,我们可以等待数据请求结束,然后再去执行下面的函数。

    那么generator是如何做到让函数走走停停的呢?这其实就是generator名字的由来,生成

        function *show() {
          alert('a');
    
          yield;  //放弃、暂停
    
          alert('b');
        }
    
        function show_1() {
          alert('a');
        }
        function show_2() {
          alert('b');
        }
    
        let genObj = show();
        console.log(genObj);
        genObj.next();  //show_1()
        genObj.next();  //show_2()


    拿我们第一次写的函数来看吧,它将我们写的一个函数show,拆分成了两个小函数,show_1,show_2,这样就能实现我们看到的走走停停效果。

    到这里,generator函数的简单运用,相信大家已经学会了,但是大家可能对文章中提到的yield不是特别了解,而yield也是generator中最不好理解的一个东西,能不能把它掌握,很大程度上决定了我们学习generator的好坏,也是因为yield比较重要,打算放在下面一篇文章中,大家感兴趣的话,可以继续关注我哦

  • 相关阅读:
    字符串加密
    接口实例
    RecyclerView添加Hearder
    基于Vue实现图片在指定区域内移动
    Tinymce 编辑器添加自定义图片管理插件
    LocalStorage和sessionStorage之间的区别
    javascript之url转义escape()、encodeURI()和decodeURI(),ifram父子传参参数有中文时出现乱码
    Js实现简单的音频播放
    通用CSS命名规范
    Hbuilder常用功能汇总
  • 原文地址:https://www.cnblogs.com/hizhy/p/10999668.html
Copyright © 2011-2022 走看看