# Generator

什么是 JavaScript Generators 呢？通俗的讲 Generators 是可以用来控制迭代器的函数。它们可以暂停，然后在任何时候恢复。如果这句话不好理解，可以看下接下来的示例。

1. 常规循环

    for (let i = 0; i < 5; i += 1) {
        console.log(i)
    }
    // this will return immediately 0 -> 1 -> 2 -> 3 -> 4

2. 利用 Generator

    function* generatorForLoop() {
        for (let i = 0; i < 5; i += 1) {
            yield console.log(i)
        }
    }

    const genForLoop = generatorForLoop()

    console.log(genForLoop.next()) // first console.log - 0
    console.log(genForLoop.next()) // 1
    console.log(genForLoop.next()) // 2
    console.log(genForLoop.next()) // 3
    console.log(genForLoop.next()) // 4

对比下代码，常规的循环只能一次遍历完所有值，Generator 可以通过调用 next 方法拿到依次遍历的值，让遍历的执行变得“可控”。

# 基本语法

定义

    function* gen() {
        yield 1
        yield 2
        yield 3
    }

    let g = gen()
    // "Generator { }"

这个是 Generator 的定义方法，有几个点值得注意：

比普通函数多一个 *
函数内部用 yield 来控制程序的执行的“暂停”
函数的返回值通过调用 next 来“恢复”程序执行

注意

Generator 函数的定义不能使用箭头函数，否则会触发 SyntaxError 错误

    let generator = * () => {} // SyntaxError
    let generator = () * => {} // SyntaxError
    let generator = ( * ) => {} // SyntaxError

这些做法都是错误的❌。

# yield 表达式

yield 关键字用来暂停和恢复一个生成器函数

关于 yield 表达式，要熟记几个知识点：

yield 表达式的返回值是 undefined，但是遍历器对象的 next 方法可以修改这个默认值。

    function* gen() {
        let val
        val = yield 1
        console.log( `1:${val}` ) // 1:undefined
        val = yield 2
        console.log( `2:${val}` ) // 2:undefined
        val = yield 3
        console.log( `3:${val}` ) // 3:undefined
    }

    var g = gen()

    console.log(g.next()) // {value: 1, done: false}
    console.log(g.next()) // {value: 2, done: false}
    console.log(g.next()) // {value: 3, done: false}
    console.log(g.next()) // {value: undefined, done: true}

从这个代码可以看出来，yield 表达式的返回值是 undefined。

yeild * 是委托给另一个遍历器对象或者可遍历对象

  function* gen() {
      let val
      val = yield 1
      console.log( `1:${val}` ) // 1:undefined
      val = yield 2
      console.log( `2:${val}` ) // 2:undefined
      val = yield [3, 4, 5]
      console.log( `3:${val}` ) // 3:undefined
  }

Generator 对象的 next 方法，遇到 yield 就暂停，并返回一个对象，这个对象包括两个属性：value 和 done。

参考步骤1 的代码可以明确看出来，执行第一句 g.next gen 代码执行到 yield 1，程序暂停，此时返回了一个对象：{value: 1, done: false}

# 方法

Generator 对象有几个方法，next、return、throw。

- next([value]) 前面我们讲了，Generator 对象通过 next 方法来获取每一次遍历的结果，这个方法返回一个对象，这个对象包含两个属性：value 和 done。value 是指当前程序的运行结果，done 表示遍历是否结束。

其实 next 是可以接受参数的，这个参数可以让你在 Generator 外部给内部传递数据，而这个参数就是作为 yield 的返回值。

    function* gen() {
        var val = 100
        while (true) {
            console.log( `before ${val}` )
            val = yield val
            console.log( `return ${val}` )
        }
    }

    var g = gen()
    console.log(g.next(20).value)
    // before 100
    // 100
    console.log(g.next(30).value)
    // return 30
    // before 30
    // 30
    console.log(g.next(40).value)
    // return 40
    // before 40
    // 40

如果对上面的话和代码不理解，可以把 console.log(g.next(30).value)和 console.log(g.next(40).value) 注释掉。你会发现只输出了 before 100 和 100，这是为什么呢？下面我们来还原下这段代码的执行过程：

g.next(20) 这句代码会执行 gen 内部的代码，遇到第一个 yield 暂停。所以 console.log( before ${val} ) 执行输出了 before 100 ，此时的 val 是 100，所以执行到 yield val 返回了 100，注意 yield val 并没有赋值给 val。
g.next(30) 这句代码会继续执行 gen 内部的代码，也就是 val = yield val 这句，因为 next 传入了 30，所以 yield val 这个返回值就是 30，因此 val 被赋值 30，执行到 console.log( return ${val} ) 输出了 30，此时没有遇到 yield 代码继续执行，也就是 while 的判断，继续执行 console.log( before ${val} ) 输出了 before 30 ，再执行遇到了 yield val 程序暂停。
g.next(40) 重复步骤 2。 - return()

return 方法可以让 Generator 遍历终止，有点类似 for 循环的 break。

    function* gen() {
        yield 1
        yield 2
        yield 3
    }

    var g = gen()

    console.log(g.next()) // {value: 1, done: false}
    console.log(g.return()) // {value: undefined, done: true}
    console.log(g.next()) // {value: undefined, done: true}

从 done 可以看出代码执行已经结束。

当然 return 也可以传入参数，作为返回的 value 值。

    function* gen() {
        yield 1
        yield 2
        yield 3
    }

    var g = gen()

    console.log(g.next()) // {value: 1, done: false}
    console.log(g.return(100)) // {value: 100, done: true}
    console.log(g.next()) // {value: undefined, done: true}

- throw() 可以通过 throw 方法在 Generator 外部控制内部执行的“终断”。

    function* gen() {
        while (true) {
            try {
                yield 42
            } catch (e) {
                console.log(e.message)
            }
        }
    }

    let g = gen()
    console.log(g.next()) // { value: 42, done: false }
    console.log(g.next()) // { value: 42, done: false }
    console.log(g.next()) // { value: 42, done: false }
    // 中断操作
    g.throw(new Error('break'))

    console.log(g.next()) // {value: undefined, done: true}

TIP

如果想退出遍历 catch 之后可以配合 return false 使用，能起到 “break” 的作用

# 应用场景

场景1

还是前面的异步操作，按顺序读取a.json、b.json、c.json，如果使用Generator该如何实现呢？

    function request(url) {
        ajax(url, res => {
            getData.next(res)
        })
    }

    function* gen() {
        let res1 = yield request('static/a.json')
        console.log(res1)
        let res2 = yield request('static/b.json')
        console.log(res2)
        let res3 = yield request('static/c.json')
        console.log(res3)
    }
    let getData = gen()
    getData.next()

场景2 我们经常玩一些小游戏，比如数数字，敲7，到7和7的倍数，无限循环转圈去数数

    function* count(x = 1) {
        while (true) {
            if (x % 7 === 0) {
                yield x
            }
            x++
        }
    }
    // es5中就是个死循环 因为es5的循环需要有个终止值，但我们这个需求没有终止，一直在数数
    let n = count()
    console.log(n.next().value)
    console.log(n.next().value)
    console.log(n.next().value)
    console.log(n.next().value)
    console.log(n.next().value)
    console.log(n.next().value)

通过 Generator 我们就能轻松实现，只要调用 n.next 我们就知道下一个数是什么了，而使用普通函数却没法做到。不信你试试看？

推荐阅读

← Promise Iterator →