這篇文章帶給大家的內容是關於ES6中Generator函數的用法介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、什麼是Generator函數
Generator函數是ES6標準中提出的一種非同步程式設計的解決方案。這個函數與普通函數最大的差別在於它可以暫停執行，又可以從暫停的位置恢復繼續執行。
從語法上看，Generator函數就是一個狀態機，封裝了許多內部狀態。
從實質上看，Generator函數就是遍歷器物件產生器。 （關於遍歷器對象，可以參考阮一峰老師的這篇文章）Generator函數傳回一個遍歷器對象，遍歷這個對象，就可以依序得到函數內部的每一個狀態。
二、基本語法
1、定義Generator函數
定義一個Generator函數和定義一個普通函數的差別在於：
function關鍵字和函數名之間有一個 *（星號）。
函數內部使用yield來定義每個函數內部的狀態。
如果函數內部有return語句，那麼他就是函數內部的最後一個狀態。
來看一個簡單的例子：
// 定义 function* sayHello() { yield 'hello'; yield 'world'; return 'ending'; } // 调用 // 注意，hw获取到的值是一个遍历器对象 let g = sayHello();
上面的例子，定義了一個名為sayHello的Generator函數，它內部有兩個yield表達式和一個return表達式。所以，函數內部有三個狀態：hello，world和return語句（結束執行）。最後，呼叫這個函數，得到一個遍歷器物件並賦值給變數g。
Generator函數的呼叫方法與普通函數完全一樣，函數名稱()。不同的是：
Generator函數呼叫後不會立即執行，那麼，我們要如何讓它開始執行內部的程式碼呢？又如何取得它內部的每一個狀態呢？此時，我們必須呼叫傳回的生成器物件的.next()方法，才能開始程式碼的執行，並且使得指標移向下一個狀態。
以上面的範例為例：
g.next(); // { value: 'hello', done: false } g.next(); // { value: 'world', done: false } g.next(); // { value: 'ending', done: true } g.next(); // { value: undefined, done: true }
上面的程式碼中，總共呼叫了四次g這個遍歷器物件的.next()方法。第一次調用，sayHello這個Generator函數開始執行，直到遇到第一個yield表達式就會暫停執行。.next()方法會回傳一個對象，它的value屬性就是目前yield表達式的值hello，done屬性的值false，表示遍歷還沒結束。
第二次再呼叫.next()，就會執行到第二個yield表達式處，並暫停執行，傳回對應的物件。
第三次呼叫.next()，函數執行到最後的return語句，此時標誌著遍歷器物件g遍歷結束，所以回傳的物件中value屬性值就是return後面所跟的值ending，done屬性值為true，表示遍歷已經結束。
第四次以及後面在呼叫.next()方法，傳回的都會是{value: undefined, done: true }。
由Generator函數傳回的遍歷器對象，只有呼叫.next()方法才會遍歷到下一個內部狀態，所以這其實是提供了一個可以暫停執行的函數，yield表達式就是暫停標誌。
遍歷器物件的.next()方法的運作邏輯如下。
yield表達式，就暫停執行後面的操作，並將緊接在yield後面的那個表達式的值，作為返回的物件的value屬性值。.next()方法時，再繼續往下執行，直到遇到下一個yield表達式。yield表達式，就一直運行到函數結束，直到return語句為止，並將return語句後面的表達式的值，作為傳回的物件的value屬性值。return語句，則傳回的物件的value屬性值為undefined。值得注意的是：
yield关键字只能出现在Generator函数中，出现在别的函数中会报错。// 出现在普通函数中，报错 (function () { yield 'hello'; })() // forEach不是Generator函数，报错 [1, 2, 3, 4, 5].forEach(val => { yield val });
yield关键字后面跟的表达式，是惰性求值的。只有当调用.next()方法、内部状态暂停到当前yield时，才会计算其后面跟的表达式的值。这等于为JavaScript提供了手动的“惰性求值”的语法功能。function* step() { yield 'step1'; // 下面的yield后面的表达式不会立即求值， // 只有暂停到这一行时，才会计算表达式的值。 yield 'step' + 2; yield 'setp3'; return 'end'; }
yield表达式本身是没有返回值的，或者说它的返回值为undefined。使用.next()传参可以为其设置返回值。（后面会讲到）function* gen() { for (let i = 0; i < 5; i++) { let res = yield; // yield表达式本身没有返回值 console.log(res); // undefined } } let g = gen(); g.next(); // {value: 0, done: false} g.next(); // {value: 1, done: false} g.next(); // {value: 2, done: false}
yield与return的异同：
相同点:
不同点：
前面我们说到过，yield表达式自身没有返回值，或者说返回值永远是undefined。但是，我们可以通过给.next()方法传入一个参数，来设置上一个（是上一个）yield表达式返回值。
来看一个例子：
function* conoleNum() { console.log('Started'); console.log(`data: ${yield}`); console.log(`data: ${yield}`); return 'Ending'; } let g = conoleNum(); g.next(); // 控制台输出：'Started' g.next('a'); // 控制台输出：'data: a' // 不传入参数'a'，就会输出'data: undefined' g.next('b'); // 控制台输出：'data: b' // 不传入参数'a'，就会输出'data: undefined'
上面的例子，需要强调一个不易理解的地方。
第一次调用.next()，此时函数暂停在代码第三行的yield表达式处。记得吗？yield会暂停函数执行，此时打印它的console.log()，也就是代码第三行的console，由于暂停并没有被执行，所以不会打印出结果，只输出了代码第二行的'Started'。
当第二次调用.next()方法时，传入参数'a'，函数暂停在代码第四行的yield语句处。此时参数'a'会被当做上一个yield表达式的返回值，也就是代码第三行的yiled表达式的返回值，所以此时控制台输出'data: a'。而代码第四行的console.log()由于暂停，没有被输出。
第三次调用，同理。所以输出'data: b'。
Generator函数返回的遍历器对象，都有一个.throw()方法，可以在函数体外抛出错误，然后在Generator函数体内捕获。
function* gen() { try { yield; } catch (e) { console.log('内部捕获', e); } }; var g = gen(); // 下面执行一次.next() // 是为了让gen函数体执行进入try语句中的yield处 // 这样抛出错误，gen函数内部的catch语句才能捕获错误 g.next(); try { g.throw('a'); g.throw('b'); } catch (e) { console.log('外部捕获', e); }
上面例子中，遍历器对象g在gen函数体外连续抛出两个错误。第一个错误被gen函数体内的catch语句捕获。g第二次抛出错误，由于gen函数内部的catch语句已经执行过了，不会再捕捉到这个错误了，所以这个错误就会被抛出gen函数体，被函数体外的catch语句捕获。
值得注意的是：
try...catch代码块，那么遍历器对象的throw方法抛出的错误，将被外部try...catch代码块捕获。try...catch代码块，那么程序将报错，直接中断执行。遍历器对象的throw方法被捕获以后，会附带执行一次.next()方法，代码执行会暂停到下一条yield表达式处。看下面这个例子：
function* gen(){ try { yield console.log('a'); } catch (e) { console.log(e); // 'Error' } yield console.log('b'); yield console.log('c'); } var g = gen(); g.next(); // 控制台输出：'a' g.throw('Error'); // 控制台输出：'b' // throw的错误被内部catch语句捕获， // 会自动在执行一次g.next() g.next(); // 控制台输出：'c'
Generator函数返回的遍历器对象，还有一个.return()方法，可以返回给定的值，并且直接结束对遍历器对象的遍历。
function* gen() { yield 1; yield 2; yield 3; } var g = gen(); g.next(); // { value: 1, done: false } // 提前结束对g的遍历。尽管yield还没有执行完 // 此时done属性值为true，说明遍历结束 g.return('foo'); // { value: "foo", done: true } g.next(); // { value: undefined, done: true }
如果.return()方法调用时，不提供参数，则返回值的value属性为undefined。
yield*用来在一个Generator函数里面执行另一个Generator函数。
如果在一个Generator函数内部，直接调用另一个Generator函数，默认情况下是没有效果的。
function* gen1() { yield 'a'; yield 'b'; } function* gen2() { yield 'x'; // 直接调用gen1() gen1(); yield 'y'; } // 遍历器对象可以使用for...of遍历所有状态 for (let v of gen2()){ 只输出了gen1的状态 console.log(v); // 'x' 'y' }
上面的例子中，gen1和gen2都是Generator函数，在gen2里面直接调用gen1，是不会有效果的。
这个就需要用到yield*表达式。
function* gen1() { yield 'a'; yield 'b'; } function* gen2() { yield 'x'; // 用 yield* 调用gen1() yield* gen1(); yield 'y'; } for (let v of gen2()){ 输出了gen1、gen2的状态 console.log(v); // 'x' 'a' 'b' 'y' }
小节
本文主要說明Generator函數的基本語法和一些細節，Generator函數的定義、yield表達式、.next()方法及傳參、.throw()方法、.return()方法以及 yield* 表達式。
文章開頭講到，Generator函數時ES6提出的非同步程式設計的一種解決方案。在實際應用中，一般在yield關鍵字後面會跟隨一個非同步操作，當非同步操作成功返回後呼叫.next()方法，將非同步流程交給下一個yield表達式。
這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript影片教學專欄！
#以上是Generator函數在ES6中的用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
