Generator函数

warkiz 发布于2019-08-20 19:08 / 1851人阅读

摘要：使用同步化异步函数的几个步骤将异步代码的每一步都封装成一个普通的函数定义一个生成器函数把流程写进去定义一个变量赋值为遍历器对象生成器变量名

基本概念

Generator 是ES6的一种异步编程结局方案。
状态机（封装了多个内部状态）遍历器对象生成

 function* helloWorldGenderator() {
        yield "hello";
        yield "world";
        return "ending";
    }
    var hw=helloWorldGenderator();

有两个状态 hw是指向一个内部状态对的指针对象

    function* helloWorldGenderator() {
        yield "hello";
        yield "world";
        return "ending";
    }
    var hw=helloWorldGenderator();
    console.log(hw.next())  //{done:false value:"hello"}
    console.log(hw.next())  //{done:false value:"hello"}
    console.log(hw.next()) //{done:true value:"hello"}

生成的遍历器之间彼此不受影响

   function* g() {
    var o=1;
     yield o++;
     yield o++;
     yield o++;
   }
   var gen=g();
   console.log(gen.next())   //1
   var xx=g();
   console.log(xx.next())  //1
   console.log(gen.next())  //2
   console.log(xx.next())   //2

当调用next() 方法的时候从上一个yield开始执行遇到yield就会暂停执行并返回yield后边的值

使用 for of方法自动可以遍历遍历器对象

 function* g() {
       yield 1;
       yield 2;
       yield 3;
       yield 4;
       yield 5;
       return 6;
   }
   let a=g();
  for(let i of a){
      console.log(i)  //1 2 3 4 5
  }

实现菲薄齐纳函数

function* ff() {
      let [prev,curr]=[0,1];
      for(;;){
          [prev,curr]=[curr,prev+curr];
          console.log("---------")
          yield  curr;
      }
  }
  for(let n of ff()){
      if(n>100) break
      console.log(n)
  }

状态机

ES5版本的状态机

 var ticking=true;
    var clock=function () {
        if(ticking){
            console.log("Tick");
        }else{
            console.log("Tock");
        }
        ticking=!ticking
    }
    setInterval(clock,1000)

ES6版本的状态机

  function* Clock () {
        while (true){
            console.log("111")
            yield ;
            console.log("222")
            yield ;
        }
    }
    var cc=Clock();
    setInterval(function () {
        cc.next()
    },1000)

使用Generator函数实现异步操作

使用例子：在服务器端有3个文件 a.html b.html c.html 现在前端需要读到这三个文件的内容才可以继续执行操作。

  $.get("a.json",function (data) {
        console.log(data)
        $.get("b.json",function (data) {
            console .log(data)
            $.get("c.json",function (data) {
                console.log(data)
                //执行前端代码
            })
        })
    })

异步回调函数的地域

 function request(url) {
        $.get(url,function (response) {
            it.next(response);
        })
    }
    function* ajaxs () {
        var i=0;
        console.log(++i,yield request("a.json"))
        console.log(++i,yield request("b.json"))
        console.log(++i,yield request("c.json"))
    }
    var it=ajaxs();
     it.next();

使用Generator实现了异步请求三个文件。
使用Generator同步化异步函数的几个步骤
1、将异步代码的每一步都封装成一个普通的函数
2、定义一个生成器函数把流程写进去
3、定义一个变量赋值为遍历器对象生成器
4、变量名.next()

GPU云服务器云服务器 Generator generator使用 generator数据类型 yeoman-generator

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85189.html

ES6学习笔记之Generator函数

摘要：调用函数后和普通函数不同的是，该函数并不立即执行，也不返回函数执行结果，而是返回一个指向内部状态的对象，也可以看作是一个遍历器对象。第一个只是用来启动函数内部的遍历器，传参也没有多大意义。之前断断续续接触到了一些ES6的知识，异步编程方面听得比较多的就是Promise，直到最近比较系统地学习了ES6的新特性才发现Generator这个神奇的存在，它可以实现一些前所未有的事情，让我顿时...

cjie 2019-08-21 14:52 评论0 收藏0
es6 generator函数

摘要：返回的遍历器对象可以依次遍历函数内部的每一个状态。示例内部捕获外部捕获内部捕获外部捕获上面代码遍历器对象连续抛出两个错误，第一个被函数体内的捕获。上面代码中，首先执行函数，获取遍历器对象，然后使用方法第二行，执行异步任务的第一阶段。参考来源《ecmascript6 入门》generator部分认识generator函数形式上，generator函数有两个特点：一是functio...

voidking 2019-08-20 15:18 评论0 收藏0
js 中的Generator 函数

摘要：函数返回的遍历器对象，还有一个方法，可以返回给定的值，并且终结遍历函数。这被称为表达式个人理解主要用作遍历具有遍历器接口的对象或函数。完整形式函数的函数总是返回一个遍历器，规定这个遍历器是函数的实例，也继承了函数的对象上的方法。语法上首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Gener...

Ku_Andrew 2019-08-23 16:46 评论0 收藏0
深入理解 Generator 函数

摘要：同时，迭代器有一个方法来向函数中暂停处抛出一个错误，该错误依然可以通过函数内部的模块进行捕获处理。本文翻译自：Diving Deeper With ES6 Generators 由于个人能力有限，翻译中难免有纰漏和错误，望不吝指正issue ES6 Generators:完整系列 The Basics Of ES6 Generators Diving Deeper With E...

jzzlee 2019-08-20 18:34 评论0 收藏0
Node v4 - Generator函数

摘要：返回的遍历器对象，可以依次遍历函数内部的每一个状态。方法调用遍历器对象的方法，使得指针移向下一个状态。运行结果就是使用一个遍历器，遍历了多个函数，有递归的效果。 1、Generator简介基本概念 Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。执行Generator函数会返回一个遍历器对象，也就是说，Ge...

cnTomato 2019-08-20 17:31 评论0 收藏0
通过ES6 Generator函数实现异步流程

摘要：换句话说，我们很好的对代码的功能关注点进行了分离通过将使用消费值得地方函数中的逻辑和通过异步流程来获取值迭代器的方法进行了有效的分离。但是现在我们通过来管理代码的异步流程部分，我们解决了回调函数所带来的反转控制等问题。本文翻译自 Going Async With ES6 Generators 由于个人能力知识有限，翻译过程中难免有纰漏和错误，还望指正Issue ES6 Gener...

刘厚水 2019-08-21 12:01 评论0 收藏0