[译] 关于 ES6 生成器 Generator 的探索

原文链接:https://medium.freecodecamp.org/lets-explore-es6-generators-5e58ed23b0f1
作者:Tiago Lopes Ferreia
译者:Soyaine

Generator

生成器(Generators)是可迭代协议(iterables)的一种实现。

它的最大特点在于,它是可以在保持上下文状态的情况下暂停执行的函数,当处理需要暂停的执行逻辑,但在恢复执行时需要之前的上下文时,这就起到了很重要的作用。看到这里有没有想到了异步编程?

语法

生成器的语法以 function* 作为开头的标识符(注意末尾的星号),同时穿插着 yield 来实现执行的暂停。下面以具体的代码演示这个过程。

function* generator() {
    // 代码A
    yield 'foo'
    // 代码B
}

调用上面的 generator 函数时,将会创建一个新的生成器,我们可以通过 next 函数来用它控制程序逻辑。运行 next 将会执行这个生成器中代码,直到 yield 的语句。到这个点时,yield 语句中的 value 的值将被返回,同时 generator 的执行也被挂起。

const g = generator()

g.next() // { value: 'foo', done: false }
// 生成器中的代码A 被执行,
// value 中的 'foo' 通过 yield 被返回,
// 然后,生成器的执行被挂起。

g.next() // { value: undefined, done: fales }
// 在这个阶段,剩下的代码(如代码B)继续被执行,
// 由于没有返回值,所以我得到 'undefined' 作为 value 的值,
// 同时这个迭代器(iterator)返回 true 以表示迭代结束。

yield

yield 伴随着生成器出现,并且允许我们在执行的中途返回值,但只能在生成器内部这样做。如果我们试图在回调时返回一个值的话,就算在生成器中声明了,也会报错。

function* generator() {
    ['foo', 'bar'].forEach(e => yield e) // SyntaxError 语法错误
    // 我们不能在一个非 generator 的函数中使用 yield
    //(译者注:此例子从 yield 被写在了 forEach 函数中)
}

yield*

yield* 是用来在一个生成器中调用另一个生成器的。

function* foo() {
    yield 'foo'
}

// 我们如何在 bar 生成器中调用 foo 生成器呢?
function* bar() {
    yield 'bar'
    foo()
    yield 'bar again'
}

const b = bar();

b.next() // { value: 'bar', done: false }
b.next() // { value: 'bar again', done: false }
b.next() // { value: undefined, done: true }

这里的 b 迭代器由 bar 生成器产生,但在调用 ‘foo’ 的时候并不会按照期待执行。这是因为,尽管运行 ‘foo’ 时产生了一个迭代器,但我们并不会迭代它。这就是 ES6 会带来 yield* 操作符的原因。

function* foo() {
    yield 'foo'
}

function* bar() {
    yield 'bar'
    yield* foo()
    yield 'bar again'
}

const b = bar();

b.next() // { value: 'bar', done: false }
b.next() // { value: 'foo', done: false }
b.next() // { value: 'bar again', done: false }
b.next() // { value: undefined, done: true }

这对数据迭代也完美适用:

function* foo() {
    yield 'foo'
}

function* bar() {
    yield 'bar'
    yield* foo()
    yield 'bar again'
}

for (let e of bar()) {
    console.log(e)
    // bar
    // foo
    // bar again
}

console.log([...bar()]) // [ 'bar', 'foo', 'bar again' ]

yield* 中遍历这个生成器中的所有元素,然后 yield 返回这个值。

function* bar() {
    yield 'bar'
    for (let e of foo()) {
        yield e
    }
    yield 'bar again'
}

作为迭代器(Iterators)的生成器(Generators)

Generators as Iterators

之所以说生成器是简单的迭代器,是因为它们同样遵循了可迭代协议(iterable protocol)和迭代器协议(iterator protocol):

  • 可迭代协议指出,一个可迭代的对象应该返回一个含有 key 为 Symbol.iterator 的迭代器。
    const g = generator()
    
    typeof g[Symbol.iterator] // function
    
  • 迭代器协议指出,迭代器对象应该是一个指向迭代函数(iteration)中下一个元素的对象,并且这个对象包含一个叫 next 的函数。
    const iterator = g[Symbol.iterator]()
    typeof iterator.next // function
    
  • 由于生成器是可迭代对象,所以我们可以使用遍历方法来迭代循环其中的值,例如 for-of
    for (let e of iterator) {
         console.log(e)
         // 'foo'
    }
    

Return

我们可以在生成器中添加一个 return 语句,但由于生成器的数据处理规则是迭代,所以 return 的作用与平常有所区别。

function* generatorWithReturn() {
    yield 'foo'
    yield 'bar'
    return 'done'
}

var g = generatorWithReturn()

g.next() // { value: 'foo', done: false }
g.next() // { value: 'bar', done: false }
g.next() // { value: 'done', done: true }

当手动执行这个迭代函数的时候,使用 next,我们得到的迭代器的最后一个 valuereturn 的返回值(如 done),此时 done 的标记值为 true。

但是在使用一个像 for-of 或者 destructuring 这样定义好的数据遍历操作时,返回值会被忽略。

for (let e of g) {
     console.log(e)
     // 'foo'
     // 'bar'
}

console.log([...g]) // ['foo', 'bar']

yield*

我们知道 yield* 允许我们在一个生成器中调用另一个生成器,同时它也允许我们通过已执行的生成器来存储返回值。

function* foo() {
     yield 'foo'
     return 'foo done'
}

function* bar() {
     yield 'bar'
     const result = yield* foo()
     yield result
}

for (let e of bar()) {
     console.log(e)
     // bar
     // foo
     // foo done
}

Throw

我们可以在生成器内部使用 thrownext 会传递发生的异常。一旦抛出异常,迭代器的流程将会中断,状态被设置为 done: true,并无限保持。

function* generatorWithThrow() {
     yield 'foo'
     throw new Error('Ups!')
     yield 'bar'
}

var g = generatorWithReturn()

g.next() // { value: 'foo', dxone: false }
g.next() // Error: Ups!
g.next() // { value: undefined, done: true }

用于数据遍历的生成器

生成器除了因 yield 而有了数据生成的作用,使用 next 它也可以遍历数据。

function* generatorDataConsumer() {
     // A
     console.log('Ready to consume!')
     while (true) {
          const input = yield; // B
          console.log(`Got: ${input}`)
     }
}

这里也有一些有趣的点可以探索。(请看代码及之后的解释)

// (1)
var g = generatorDataConsumer()

// (2)
g.next() // { value: undefined, done: false }
// Ready to consume!

// (3)
g.next('foo') // { value: undefined, done: false }
// Got: foo

创建生成器 (1)

在这一步创建了一个 g 生成器,程序会在 A 处停止执行。

第一个 next (2)

执行第一个 next 时,生成器会执行到第一个 yield 语句。第一次执行的时候,通过 next 传递的任何值都会被忽略,这是因为没有出现 yield 语句。所以执行过程会在 B 处暂停,等待 yield 被赋值。

下一个 next (3)

在下一次执行 next 时,生成器会运行代码至下一个 yield。在我们上面的例子中,它打印了通过 yield 得到的值(i.e. Got: foo),并且再次在 yield 处暂停。

应用例子

Use Cases

实现可迭代协议

因为生成器是可迭代协议的一种实现,所以当它被创建的时候我们也就得到了一个可迭代的对象,在这个对象中,yield 代表了每次迭代时传递出的值。这使得我们可以用生成器来创建迭代器。

下面这个例子展示了一个可迭代的生成器遍历数据并找出最大值的过程。因为我们的生成器会返回一个可迭代对象,所以我们可以用 for-of 来遍历这些值。

记住 yield 会暂停生成器的执行过程,每次迭代时,生成器会从之前暂停的地方重新开始。

function* evenNumbersUntil() {
    for (let value = 0; value <= max; value += 2) {
        // 当 'value' 的值是偶数时,我们把它 'yield'
        // 并作为迭代过程中的下一个值
        if (value % 2 === 0) yield value;
    }
}

// 现在我们可以用 'for-of' 来迭代这些值了
for (let e of evenNumbersUntil(10)) {
    console.log(e)
    // 0
    // 2
    // 4
    // 6
    // 8
    // 10
}

异步的代码

我们可以用生成器来更好实现异步代码,比如 promises。这部分的例子很好的介绍了 ES8 中的新特性 async/await

下面要展示一个用 promises 来获取 JSON 文件的例子,我们将用 Jake Archibald 的在 developers.google.com 上的例子。

为了让我们的代码看起来更像同步的风格,我们使用了 co 库。至于 async/await 的话,我们的代码会有点像我们之前的版本。

结尾

这是 Axel Rauschmayer 在 Exploring ES6 上的图,向我们展示了生成器是如何与迭代器联系在一起的。

Exploring ES6

生成器是可迭代协议的一种实现,且遵循可迭代协议和迭代器协议,因此它们都可以用于建立可迭代对象。

生成器最令人惊奇的点在于它可以在执行过程中暂停,为此 ES6 引入了 yield 的新特性。

然而在生成器中调用生成器并非像执行生成器函数那么简单,为了解决这个问题,ES6 中又有了 yield*

生成器为让异步编程向同步风格的发展更近了一步。

致谢

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 140,587评论 1 295
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,384评论 1 254
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 92,492评论 0 206
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,584评论 0 171
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,270评论 1 250
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,517评论 1 167
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,227评论 2 266
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,001评论 0 161
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,705评论 6 223
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,339评论 0 211
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,105评论 2 211
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,432评论 1 222
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,131评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 26,950评论 2 208
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,335评论 3 200
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,571评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,897评论 0 163
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,295评论 2 226
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,414评论 2 228

推荐阅读更多精彩内容