Generator的正確打開方式

来源:https://www.cnblogs.com/jiasm/archive/2018/05/15/9043778.html
-Advertisement-
Play Games

前兩年大量的在寫Generator+co，用它來寫一些類似同步的代碼但實際上，Generator並不是被造出來乾這個使的，不然也就不會有後來的async、await了Generator是一個可以被暫停的函數，並且何時恢復，由調用方決定希望本文可以幫助你理解Generator究竟是什麼，以及怎麼用 放 ...


前兩年大量的在寫Generator+co，用它來寫一些類似同步的代碼
但實際上，Generator並不是被造出來乾這個使的，不然也就不會有後來的async、await了
Generator是一個可以被暫停的函數，並且何時恢復，由調用方決定
希望本文可以幫助你理解Generator究竟是什麼，以及怎麼用

放一張圖來表示我對Generator的理解：

一個咖啡機，雖說我並不喝咖啡，可惜找不到造王老吉的機器-.-

我所理解的Generator咖啡機大概就是這麼的一個樣子的：

  1. 首先，我們往機器裡邊放一些咖啡豆
  2. 等我們想喝咖啡的時候，就可以按開關(gen.next())，機器開始磨咖啡豆、煮咖啡、接下來就得到咖啡了
  3. 等接滿了一杯咖啡後，閥門就會自動關閉(yield)
  4. 如果你一開始往機器裡邊放的咖啡豆很多的話，此時，機器裡邊還是會有一些剩餘的，下次再想喝還可以繼續按開關，執行（磨豆、煮咖啡、接咖啡）這一套操作

拿Generator將上述咖啡機實現一下：

function * coffeeMachineGenerator (beans) {
  do {
    yield cookCoffee()
  } while (--beans)

  // 煮咖啡
  function cookCoffee () {
    console.log('cooking')

    return 'Here you are'
  }
}

// 往咖啡機放咖啡豆
let coffeeMachine = coffeeMachineGenerator(10)

// 我想喝咖啡了
coffeeMachine.next()

// 我在3秒後還會喝咖啡
setTimeout(() => {
  coffeeMachine.next()
}, 3 * 1e3)

 

代碼運行後，我們首先會得到一條cooking的log，
然後在3s後會再次得到一條log。

這就解釋了Generator是什麼：
一個可以暫停的迭代器
調用next來獲取數據（我們自己來決定是否何時煮咖啡）
在遇到yield以後函數的執行就會停止（接滿了一杯，閥門關閉）
我們來決定何時運行剩餘的代碼next（什麼時候想喝了再去煮）

這是Generator中最重要的特性，我們只有在真正需要的時候才獲取下一個值，而不是一次性獲取所有的值

Generator的語法

聲明Generator函數有很多種途徑，最重要的一點就是，在function關鍵字後添加一個*

function * generator () {}
function* generator () {}
function *generator () {}

let generator = function * () {}
let generator = function*  () {}
let generator = function  *() {}

// 錯誤的示例
let generator = *() => {}
let generator = ()* => {}
let generator = (*) => {}

 

或者，因為是一個函數，也可以作為一個對象的屬性來存在：

class MyClass {
  * generator() {}
  *generator2() {}
}

const obj = {
  *generator() {}
  * generator() {}
}

 

generator的初始化與復用

一個Generator函數通過調用兩次方法，將會生成兩個完全獨立的狀態機
所以，保存當前的Generator對象很重要：

function * generator (name = 'unknown') {
  yield `Your name: ${name}`
}

const gen1 = generator()
const gen2 = generator('Niko Bellic')

gen1.next() // { value: Your name: unknown    , done: false}
gen2.next() // { value: Your name: Niko Bellic, done: false}

 

Method: next()

最常用的next()方法，無論何時調用它，都會得到下一次輸出的返回對象（在代碼執行完後的調用將會始終返回{value: undefined, done: true}）。

next總會返回一個對象，包含兩個屬性值：
value：yield關鍵字後邊表達式的值
done ：如果已經沒有yield關鍵字了，則會返回true .

function * generator () {
  yield 5
  return 6
}

const gen = generator()

console.log(gen.next()) // {value: 5, done: false}
console.log(gen.next()) // {value: 6, done: true}
console.log(gen.next()) // {value: undefined, done: true}
console.log(gen.next()) // {value: undefined, done: true} -- 後續再調用也都會是這個結果

 

作為迭代器使用

Generator函數是一個可迭代的，所以，我們可以直接通過for of來使用它。

function * generator () {
  yield 1
  yield 2
  return 3
}

for (let item of generator()) {
  item
}

// 1
// 2

 

return不參與迭代
迭代會執行所有的yield，也就是說，在迭代後的Generator對象將不會再返回任何有效的值

Method: return()

我們可以在迭代器對象上直接調用return()，來終止後續的代碼執行。
在return後的所有next()調用都將返回{value: undefined, done: true}

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

const gen = generator()

gen.return()     // {value: undefined, done: true}
gen.return('hi') // {value: "hi", done: true}
gen.next()       // {value: undefined, done: true}

 

Method: throw()

在調用throw()後同樣會終止所有的yield執行，同時會拋出一個異常，需要通過try-catch來接收：

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

const gen = generator()

gen.throw('error text') // Error: error text
gen.next()              // {value: undefined, done: true}

 

Yield的語法

yield的語法有點像return，但是，return是在函數調用結束後返回結果的
並且在調用return之後不會執行其他任何的操作

function method (a) {
  let b = 5
  return a + b
  // 下邊的兩句代碼永遠不會執行
  b = 6
  return a * b
}

method(6) // 11
method(6) // 11

 

而yield的表現則不一樣

function * yieldMethod(a) {
  let b = 5
  yield a + b
  // 在執行第二次`next`時，下邊兩行則會執行
  b = 6
  return a * b
}

const gen = yieldMethod(6)
gen.next().value // 11
gen.next().value // 36

 

yield*

yield*用來將一個Generator放到另一個Generator函數中執行。
有點像[...]的功能：

function * gen1 () {
  yield 2
  yield 3
}

function * gen2 () {
  yield 1
  yield * gen1()
  yield 4
}

let gen = gen2()

gen.next().value // 1
gen.next().value // 2
gen.next().value // 3
gen.next().value // 4

 

yield的返回值

yield是可以接收返回值的，返回值可以在後續的代碼被使用
一個詭異的寫法

function * generator (num) {
  return yield yield num
}

let gen = generator(1)

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

 

我們在調用第一次next時候，代碼執行到了yield num，此時返回num
然後我們再調用next(2)，代碼執行的是yield (yield num)，而其中返回的值就是我們在next中傳入的參數了，作為yield num的返回值存在。
以及最後的next(3)，執行的是這部分代碼return (yield (yield num))，第二次yield表達式的返回值。

一些實際的使用場景

上邊的所有示例都是建立在已知次數的Generator函數上的，但如果你需要一個未知次數的Generator，僅需要創建一個無限迴圈就夠了。

一個簡單的隨機數生成

比如我們將實現一個隨機數的獲取：

function * randomGenerator (...randoms) {
  let len = randoms.length
  while (true) {
    yield randoms[Math.floor(Math.random() * len)]
  }
}

const randomeGen = randomGenerator(1, 2, 3, 4)

randomeGen.next().value // 返回一個隨機數

 

代替一些遞歸的操作

那個最著名的斐波那契數，基本上都會選擇使用遞歸來實現
但是再結合著Generator以後，就可以使用一個無限迴圈來實現了：

function * fibonacci(seed1, seed2) {
  while (true) {
    yield (() => {
      seed2 = seed2 + seed1;
      seed1 = seed2 - seed1;
      return seed2;
    })();
  }
}

const fib = fibonacci(0, 1);
fib.next(); // {value: 1, done: false}
fib.next(); // {value: 2, done: false}
fib.next(); // {value: 3, done: false}
fib.next(); // {value: 5, done: false}
fib.next(); // {value: 8, done: false}

 

與async/await的結合

再次重申，我個人不認為async/await是Generator的語法糖。。

如果是寫前端的童鞋，基本上都會遇到處理分頁載入數據的時候
如果結合著Generator+async、await，我們可以這樣實現：

async function * loadDataGenerator (url) {
  let page = 1

  while (true) {
    page = (yield await ajax(url, {
      data: page
    })) || ++page
  }
}

// 使用setTimeout模擬非同步請求
function ajax (url, { data: page }) {
  return new Promise((resolve) => {
    setTimeout(_ => {
      console.log(`get page: ${page}`);
      resolve()
    }, 1000)
  })
}

let loadData = loadDataGenerator('get-data-url')

await loadData.next()
await loadData.next()

// force load page 1
await loadData.next(1)
await loadData.next()

// get page: 1
// get page: 2
// get page: 1
// get page: 2

 

這樣我們可以在簡單的幾行代碼中實現一個分頁控制函數了。
如果想要從載入特定的頁碼，直接將page傳入next即可。

小記

Generator還有更多的使用方式，（實現非同步流程式控制制、按需進行數據讀取）
個人認為，Generator的優勢在於代碼的惰性執行，Generator所實現的事情，我們不使用它也可以做到，只是使用Generator後，能夠讓代碼的可讀性變得更好、流程變得更清晰、更專註於邏輯的實現。

如果有什麼不懂的地方 or 文章中一些的錯誤，歡迎指出

參考資料

  1. Javascript (ES6) Generators — Part I: Understanding Generators
  2. What are JavaScript Generators and how to use them

文章示例代碼


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MongoDB學習--安裝與管理
    一、簡介 MongoDB是一種強大、靈活，且易於擴展的通用型資料庫。他能擴展出非常多的功能。如二級索引（secondary index）、範圍查詢（range query）、排序、聚合（aggregation），以及地理空間索引（geospatial index）。 1、易於使用 MongoDB是一 ...
  • 大廠們的 redis 集群方案
    redis 集群方案主要有兩類，一是使用類 codis 的架構，按組劃分，實例之間互相獨立； 另一套是基於官方的 redis cluster 的方案；下麵分別聊聊這兩種方案； 類 codis 架構 這套架構的特點： 分片演算法：基於 slot hash桶； 分片實例之間相互獨立，每組 一個master ...
  • 【整理】MySQL查詢優化
    優化建議 應儘量避免在 where 子句中對欄位進行 null 值判斷，否則將導致引擎放棄使用索引而進行全表掃描，如：select id from t where num is null可以在num上設置預設值0，確保表中num列沒有null值，然後這樣查詢：select id from t whe ...
  • SQL SERVER TRIGGER 觸發器
    觸發器是一種特殊的存儲過程，它的執行不是由程式調用，也不是手動執行，而是由事件來觸發。觸發器是當對某一個表進行操作。例如：update、insert、delete這些操作的時候，系統會自動調用執行該表上對應的觸發器。觸發器又分為1、DML（ 數據操縱語言 Data Manipulation Lan... ...
  • redis（四）
    hash hash用於存儲對象，對象的格式為鍵值對 命令 設置 設置單個屬性 設置多個屬性 獲取 獲取一個屬性的值 獲取多個屬性的值 獲取所有屬性和值 獲取所有的屬性 返回包含屬性的個數 獲取所有值 其它 判斷屬性是否存在 刪除屬性及值 返回值的字元串長度 list 列表的元素類型為string 按 ...
  • 自己動手寫一個簡易對象關係映射，ORM
    ORM簡介 ORM即Object Relational Mapping，全稱對象關係映射。當我們需要對資料庫進行操作時，勢必需要通過連接數據、調用sql語句、執行sql語句等操作，ORM將資料庫中的表，欄位，行與我們面向對象編程的類及其方法，屬性等一一對應，即將該部分操作封裝起來，程式猿不需懂得sq ...
  • NoHttp封裝--08 用一個實體類接收所有介面數據
    1.用戶信息獲取--bean實體類形式返回數據 ①伺服器端： 代碼： json: ②客戶端： 代碼： 2.書籍信息--list集合形式返回數據 ① 伺服器端： 代碼： json： ②客戶端： 代碼： 完整代碼：https://github.com/ganchuanpu/StarHttp ...
  • 5種方式實現數組扁平化
    數組扁平化概念 數組扁平化是指將一個多維數組變為一維數組 [1, [2, 3, [4, 5]]] > [1, 2, 3, 4, 5] 實現 1. reduce 遍曆數組每一項，若值為數組則遞歸遍歷，否則concat。 function flatten(arr) { return arr.reduce ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類