这篇文章给大家分享的是有关JavaScript中Generator函数有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
Generator函数的定义
在阮一峰老师的书中的说法是:
Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。
我的理解:
生成器函数可以理解为: 函数内部是由多个小函数组成的, 使用yield关键字将函数内部 分割成多个块区域; 并且当函数执行时, 遇到yield就会停止, 并且将yield 后面的表达式结果输出(当然外部要调用next()方法); 下次再调用next()方法时, 就从上一个停止的地方开始执行(这意味着函数有有记忆功能); 如果下面没有再遇到yield的话 就像普通函数执行完. 函数的返回值是一个可迭代对象(遍历器对象); 我喜欢叫可迭代对象, 或者说可遍历对象...
说一说可迭代对象(iterator)的next()方法
function CreateIterator(iterator) { // 定义一个初始下标用来判断 let nextIndex = 0; // 返回对象: 包含的next方法, return { next: function () { // 返回一个对象: value是当前对象下标对应的值, done是是否遍历完成 return nextIndex < iterator.length ? // i++ 先参数运算在 自增1 {value: iterator[nextIndex++], done: false} : {value: undefined, done: true}; } } } // 实例化一个遍历器 let iter1 = CreateIterator([1,2,3,4,5]); console.log(iter1); // 一个具有next方法的对象 console.log(iter1.next().value); // 1 console.log(iter1.next().value); // 2 console.log(iter1.next().value); // 3 console.log(iter1.next().value); // 4 console.log(iter1.next().value); // 5 console.log(iter1.next().value); // undefined
生成器函数的使用
generator生成器函数的使用: function *fn() { 代码1; yield; 代码2; } 普通函数: 执行到底 生成器函数: 遇到yield会暂停,交出执行权,下次执行从上次的停止的位置继续 生成器函数返回值为: 生成器对象 生成器对象.next()方法才能执行 函数体中的代码 // 可以解决函数回调嵌套的问题; 解决耗时操作 function *func() { // 请求数据. // yield ajax() // 处理数据 } // generator函数本质上 分割成多个小函数来执行... yield关键字前后 // 遇到yield就暂停; 没有就往下执行... // yield 起到了 暂停函数执行的作用
关于yield关键字的理解
yield传值
举个栗子:
function *g2(x, y) { let sum = x+y; yield sum; // sum是第一个输出结果 let agv = sum / 2; yield agv; // agv 是第二个输出的结果 return {"和": sum, "平均数": agv}; // 最后一个结果 } let gg2 = g2(100, 20); console.log(gg2.next().value); // 120 console.log(gg2.next().value); // 60 console.log(gg2.next().value); // { '和': 120, '平均数': 60 }
Generator的应用
这里只做一个简单举例, 像我们平时使用的ES7中的 async 函数; 他就是生成器函数的一种应用; 它其实是 Generator 函数的语法糖。
借用ES6入门中的一个例子: 两种方式去读取文件
const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) { if (error) return reject(error); resolve(data); }); }); }; // 1.使用生成器函数 读取文件 const gen = function* () { const f1 = yield readFile(__dirname + '/first.json'); const f2 = yield readFile(__dirname + '/second.json'); console.log(f1.toString()); // 没有输出; 因为 f1 拿到是一个 Iterator 对象 console.log(f2.toString()); }; // 使用 async + await 读取; 注意两种需配合使用 const asyncReadFile = async function () { const f1 = await readFile(__dirname + '/first.json'); const f2 = await readFile(__dirname + '/second.json'); console.log(f1.toString()); //async函数的返回值是 Promise 对象 console.log(f2.toString()); }; gen(); // 没有值, 需要用 next()方法去取值 asyncReadFile() // 返回值 {"hello": "first"} {"hello": "second"}
所以; 我们这里对比一下; async函数是将 Generator 函数的星号(*)替换成async,将yield替换成await,大大方便了我们的使用。
平时的异步代码 我们就可以使用 async + await的形式来实现...
比如vue中的一个ajax请求去获取数据
methods: { async getApi() { let res = await axios.get('url') // 这里的执行顺序是同步的... console.log(res) } }
感谢各位的阅读!关于JavaScript中Generator函数有什么用就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。