ES6深入浅出 Generator

2019年8月22日 212次阅读 来源: 一歩

一步，一步前进の一步

ES6深入浅出之Generator生成器。本人对生成器的印象是语法难以明白，又没有什么现实的运用场景。为啥要进修一下呢？能够将来某些高等的营业会用到，另有万一面试官问的话，我得能侃几句，显得我牛😏。

定义

Generator 是为异步而生，一般的函数是一进入就必需实行完成的，而 Generator 能够屡次停息，让出掌握权。

《ES6深入浅出 Generator》

语法

进修 Generator 语法，你须要相识function* 、yield、next三个基本概念。

function* 用来声明一个函数是生成器函数，它比一般的函数声明多了一个*,*的位置比较随便能够挨着 function 关键字，也能够挨着函数名，看个人喜欢。

yield 产出的意义，这个关键字只能出现在生成器函数体内，然则生成器中也能够没有 yield 关键字，函数碰到 yield 的时刻会停息，并把 yield 背面的表达式效果抛出去。

next作用是将代码的掌握权交还给生成器函数。

// 声明生成器函数
function* generator() {
    // A
    yield 'foo'
    // B
}
// 猎取生成器对象
let g = generator();
// 第一个 next()，初次启动生成器
g.next(); // {value: "foo", done: false}
// 叫醒被 yield 停息的状况
g.next();
// {value: undefined, done: true}

读完上面的代码有无觉得生成器彷佛个又懒又胖的人，每次必需推他一下才会走一点点，直到终点。我对生成器的误会，生成器能够现实上超等屌的。

固然，生成器和迭代器有点暗昧的关联，彷佛生成器就是迭代器，还没有细致进修过 Iterator，在此不睁开，自行相识。

yield & next 生成器内外勾结

上面的代码片断，我们知道了 next()的返回值的 value部份就是 yield 背面的表达式。现实上 next()也能够向生成器内部通报某些数据。

function* generator(txt) {
    console.log(txt); // 2
    let result01 = yield '我是一步';
    console.log(result01); // 4
    // return;
}

let g = generator('你是谁?');
console.log('对话最先~~'); // 1
let step01 = g.next();
console.log(step01.value);// 3
g.next('迎接打赏')；
console.log('对话完毕~~'); // 5

来来一图胜千言，我做了一个并不严谨的 low 图，😤真丑啊。对不对我也不能保证。

《ES6深入浅出 Generator》

须要注重的一点是，第一个 next()只是为了启动生成器，假如你尝试给此处的它通报点东西是没用的。

经由过程上图，愿望读到这里的小伙伴明白了生成器的实行流程以及 yield 和 next 是怎样互相通报数据的。

Generator 连系异步处置惩罚

开篇也说，Generator 是为了异步而生的，那我们就简朴看下怎样举行异步处置惩罚。额，实在 async await 已很完美了。

function* gen () {
  let url = 'https://api.github.com/users/github'
  let result = yield fetch(url)
  console.log(result.bio)
  // 要求2必需等要求1拿到效果，下面的代码是伪代码
  yield fetch('xxxxxx?name=' + result.bio)
}

let g = gen()
let result = g.next()

result
  .value
  .then(function (data) {
    return data.json()
  })
  .then(function (data) {
    g.next(data)
  })
  g.next();

写到这里有点感悟，一般函数一旦实行，函数外部是没法干涉干与函数体内部的流程的只能等函数实行完成，而生成器函数经由过程 yield 和 next 互相通报数据能够掌握函数体内的代码流程，倏忽觉得 Generator 并非一无可取呢~。异步代码参考了Promise,Generator（生成器）,async（异步）函数

其他

Generator 另有两点比较好玩的，非常处置惩罚，该部份内容请查阅阮一峰先生的文章自学。
生成器出了能够挪用next()、还能够运用 throw()、return()，也请自学。

材料引荐

ES6 中的生成器函数引见
Javascript (ES6) Generators — Part I: Understanding Generators(图是从此处 copy 来的)
ES6 Generator引见
经由过程ES6 Generator函数完成异步操纵
总结一下ES6中promise、generator和async/await中的错误处置惩罚

🌚 前端进修QQ群: 538631558 🌚

【开辟环境引荐】
Cloud Studio 是基于浏览器的集成式开辟环境，支撑绝大部份编程言语，包含 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小顺序等等，无需下载安装顺序，一键切换开辟环境。 Cloud Studio供应了完全的 Linux 环境，而且支撑自定义域名指向，动态盘算资本调解，能够完成种种运用的开辟编译与布置。

    原文作者：一歩
    原文地址: https://segmentfault.com/a/1190000016040985
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞