资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Generator函数

Generator函数

yagami / 3151人阅读

摘要：语法上，首先可以把它理解成，函数是一个状态机，封装了多个内部状态。返回的遍历器对象，可以依次遍历函数内部的每一个状态。

写在前面:

这一篇是关于ES6中生成器函数相关总结和理解...

Generator函数的定义

在阮一峰老师的书中的说法是:
Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

我的理解:
生成器函数可以理解为: 函数内部是由多个小函数组成的, 使用yield关键字将函数内部 分割成多个块区域; 并且当函数执行时, 遇到yield就会停止, 并且将yield 后面的表达式结果输出(当然外部要调用next()方法); 下次再调用next()方法时, 就从上一个停止的地方开始执行(这意味着函数有有记忆功能); 如果下面没有再遇到yield的话 就像普通函数执行完. 函数的返回值是一个可迭代对象(遍历器对象); 我喜欢叫可迭代对象, 或者说可遍历对象...

说一说可迭代对象(iterator)的next()方法 
</>复制代码 
  1. function CreateIterator(iterator) {
  2.     // 定义一个初始下标用来判断
  3.     let nextIndex = 0;
  4.     // 返回对象: 包含的next方法, 
  5.     return {
  6.         next: function () {
  7.             // 返回一个对象: value是当前对象下标对应的值, done是是否遍历完成
  8.             return nextIndex < iterator.length ?
  9.                 // i++ 先参数运算在 自增1 
  10.                 {value: iterator[nextIndex++], done: false} :
  11.                 {value: undefined, done: true};
  12.         }
  13.     }
  14. }
  15. // 实例化一个遍历器
  16. let iter1 = CreateIterator([1,2,3,4,5]);
  17. console.log(iter1); // 一个具有next方法的对象
  18. console.log(iter1.next().value); // 1
  19. console.log(iter1.next().value); // 2
  20. console.log(iter1.next().value); // 3
  21. console.log(iter1.next().value); // 4
  22. console.log(iter1.next().value); // 5
  23. console.log(iter1.next().value); // undefined
生成器函数的使用 
</>复制代码 
  1. generator生成器函数的使用:
  2. function *fn() {
  3.     代码1; 
  4.     yield; 
  5.     代码2;
  6. }
  7. 普通函数: 执行到底
  8. 生成器函数: 遇到yield会暂停,交出执行权,下次执行从上次的停止的位置继续
  9. 生成器函数返回值为: 生成器对象
  10. 生成器对象.next()方法才能执行 函数体中的代码
  11. // 可以解决函数回调嵌套的问题; 解决耗时操作
  12. function *func() {
  13.     // 请求数据.
  14.     // yield ajax() 
  15.     // 处理数据
  16. } 
  17. // generator函数本质上 分割成多个小函数来执行... yield关键字前后
  18. // 遇到yield就暂停; 没有就往下执行...
  19. // yield 起到了 暂停函数执行的作用
关于yield关键字的理解 yield传值

yield输出值

举个栗子:

</>复制代码 
  1.      
  2. function *g2(x, y) {        
  3.     let sum = x+y;
  4.     yield sum; // sum是第一个输出结果
  5.         
  6.     let agv = sum / 2;
  7.     yield agv; // agv 是第二个输出的结果
  8.     
  9.     return {"和": sum, "平均数": agv}; // 最后一个结果
  10. }
  11.     
  12. let gg2 = g2(100, 20);        
  13. console.log(gg2.next().value);  // 120
  14. console.log(gg2.next().value);  // 60
  15. console.log(gg2.next().value);  // { "和": 120, "平均数": 60 }
  16.
Generator的应用

这里只做一个简单举例, 像我们平时使用的ES7中的 async 函数; 他就是生成器函数的一种应用; 它其实是 Generator 函数的语法糖。

借用ES6入门中的一个例子: 两种方式去读取文件

</>复制代码 
  1. const fs = require("fs");
  2. const readFile = function (fileName) {
  3.   return new Promise(function (resolve, reject) {
  4.     fs.readFile(fileName, function(error, data) {
  5.       if (error) return reject(error);
  6.       resolve(data);
  7.     });
  8.   });
  9. };
  10. // 1.使用生成器函数 读取文件
  11. const gen = function* () {
  12.   const f1 = yield readFile(__dirname + "/first.json");
  13.   const f2 = yield readFile(__dirname + "/second.json");
  14.   console.log(f1.toString());  // 没有输出; 因为 f1 拿到是一个 Iterator 对象 
  15.   console.log(f2.toString());
  16. };
  17. // 使用 async + await 读取; 注意两种需配合使用
  18. const asyncReadFile = async function () {
  19.     const f1 = await readFile(__dirname + "/first.json");
  20.     const f2 = await readFile(__dirname + "/second.json");
  21.     console.log(f1.toString());  //async函数的返回值是 Promise 对象
  22.     console.log(f2.toString());
  23. };
  24. gen(); // 没有值, 需要用 next()方法去取值
  25. asyncReadFile() // 返回值 {"hello": "first"} {"hello": "second"}

所以; 我们这里对比一下; async函数是将 Generator 函数的星号（*）替换成async，将yield替换成await，大大方便了我们的使用。

平时的异步代码 我们就可以使用 async + await的形式来实现...
比如vue中的一个ajax请求去获取数据

</>复制代码 
  1. methods: {
  2.     async getApi() {
  3.         let res = await axios.get("url")
  4.         // 这里的执行顺序是同步的...
  5.         console.log(res)
  6.     }
  7. }
GPU云服务器 云服务器 Generator generator使用 generator数据类型 yeoman-generator

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

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

相关文章

  • ES6学习笔记之Generator函数

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

    cjie 评论0 收藏0

  • es6 generator函数

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

    voidking 评论0 收藏0

  • js 中的Generator 函数

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

    Ku_Andrew 评论0 收藏0

  • 深入理解 Generator 函数

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

    jzzlee 评论0 收藏0

  • Node v4 - Generator函数

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

    cnTomato 评论0 收藏0

  • 通过ES6 Generator函数实现异步流程

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

    刘厚水 评论0 收藏0

发表评论

登陆后可评论

0条评论

yagami

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<