JavaScript中Generator函数的详理解

本篇文章给大家带来的内容是关于Javascript中Generator函数的详理解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

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 
生成器函数的使用
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);  // { &＃39;和&＃39;: 120, &＃39;平均数&＃39;: 60 }
Generator的应用
这里只做一个简单举例, 像我们平时使用的ES7中的 async 函数; 他就是生成器函数的一种应用; 它其实是 Generator 函数的语法糖。
借用ES6入门中的一个例子: 两种方式去读取文件
const fs = require(&＃39;fs&＃39;);

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 + &＃39;/first.json&＃39;);
  const f2 = yield readFile(__dirname + &＃39;/second.json&＃39;);

  console.log(f1.toString());  // 没有输出; 因为 f1 拿到是一个 Iterator 对象 
  console.log(f2.toString());
};

// 使用 async + await 读取; 注意两种需配合使用
const asyncReadFile = async function () {
    const f1 = await readFile(__dirname + &＃39;/first.json&＃39;);
    const f2 = await readFile(__dirname + &＃39;/second.json&＃39;);

    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(&＃39;url&＃39;)
        // 这里的执行顺序是同步的...
        console.log(res)
    }
}
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的Javascript教程视频栏目！
以上就是Javascript中Generator函数的详理解的详细内容，更多请关注 第一PHP社区 其它相关文章！