文章目錄

• 1. 基本語法
• 2. 應用場景

通俗的講 Generators 是可以用來控制迭代器的函數。

// 常規循環 for (let i = 0; i < 5; i += 1) {console.log(i) }// 利用 Generator function* generatorForLoop() {for (let i = 0; i < 5; i += 1) {yield console.log(i)} } const genForLoop = generatorForLoop() console.log(genForLoop.next()) // 0 console.log(genForLoop.next()) // 1 console.log(genForLoop.next()) // 2 console.log(genForLoop.next()) // 3 console.log(genForLoop.next()) // 4

常規的循環只能一次遍歷完所有值，Generator 可以通過調用 next 方法拿到依次遍歷的值，讓遍歷的執行變得“可控”。

1. 基本語法

function* gen() {yield 1yield 2yield 3 }let g = gen() // "Generator { }"

定義方法注意點：

• 比普通函數多一個 *
• 函數內部用 yield 來控制程序的執行的“暫?！?/li>
• 函數的返回值通過調用 next 來“恢復”程序執行

Generator 函數的定義不能使用箭頭函數，否則會觸發 SyntaxError 錯誤

yield 表達式
yield 關鍵字用來暫停和恢復一個生成器函數。

• yield 表達式的返回值是 undefined，但是遍歷器對象的 next 方法可以修改這個默認值。
• yeild * 是委托給另一個遍歷器對象或者可遍歷對象
• Generator 對象的 next 方法，遇到 yield 就暫停，并返回一個對象，這個對象包括兩個屬性：value 和 done。

方法
Generator 對象有幾個方法，next、return、throw。

function* gen() {var val = 100while (true) {console.log( `before ${val}` )val = yield valconsole.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

1.g.next(20) 這句代碼會執行 gen 內部的代碼，遇到第一個 yield 暫停。所以 console.log( before ${val} ) 執行輸出了 before 100 ，此時的 val 是 100，所以執行到 yield val 返回了 100，注意 yield val 并沒有賦值給 val。
2.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 程序暫停。
3.g.next(40) 重復步驟 2。

return 方法可以讓 Generator 遍歷終止，有點類似 for 循環的 break：

function* gen() {yield 1yield 2yield 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 1yield 2yield 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 方法在 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}

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

2. 應用場景

場景1：順序請求讀取文件

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：無限循環但不會導致崩潰

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)

總結

以上是生活随笔為你收集整理的【ES6(2015)】Generator的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。