---
tags: ES6, Javascript
disqus: hackmd
---

# [JS]Generators 生成器

[淺入淺出 Generator Function](https://denny.qollie.com/2016/05/08/es6-generator-func/)
[Generator 函数的语法](https://es6.ruanyifeng.com/#docs/generator)
[JavaScript ES6 Generators 生成器](https://www.fooish.com/javascript/ES6/generators.html)
[[JS] JavaScript Generator 的使用](https://pjchender.github.io/2017/09/26/js-javascript-generator-%E7%9A%84%E4%BD%BF%E7%94%A8/)

---

Generators (生成器) 是 ES6 引入的另一個新功能，Generators 像是一個可以隨時暫停 (pause) 和繼續 (resume) 執行的特殊函數，它會自動幫你維護一個內部狀態。

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

var g = gen();

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

上面是一個 Generator 的宣告，看起來就像是一般的函數，但有幾點不同：

Generator 函數裡面使用 yield 關鍵字，來定義和暫停不同的內部執行狀態

宣告一個 Generator 的關鍵字是*，function 關鍵字後面接著一個星號 \*，因為目前並未強制規定\*號的位置，所以以下四種寫法都被接受。

不過一般大多是使用第三種寫法，讓\*號緊跟在function後面

function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }

### next()、throw()、return()

這三個為Generator的方法，可以看這[Generator](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator)。

var gen = function* gen() {
    try {
        yield 1;
        yield 2;
        yield 3;
    }
    catch (e) {
        console.log(e);
    }
}

var g = gen();

g.next(); //{value: 1, done: false}
g.throw('error been catched'); //{value: undefined, done: true}
g.return(); //{value: undefined, done: true}