ES6深刻淺出 Generator

時間 2019-11-06

標籤 es6 深刻 generator 欄目 JavaScript 简体版

原文原文鏈接

一步，一步前進の一步

ES6深刻淺出之Generator生成器。本人對生成器的印象是語法難以理解，又沒有什麼實際的應用場景。爲啥要學習一下呢？可能將來某些高級的業務會用到，還有萬一面試官問的話，我得能侃幾句，顯得我牛😏。javascript

定義

Generator 是爲異步而生，正常的函數是一進入就必須執行完成的，而 Generator 能夠屢次暫停，讓出控制權。html

語法

學習 Generator 語法，你須要瞭解function* 、yield、next三個基本概念。前端

function* 用來聲明一個函數是生成器函數，它比普通的函數聲明多了一個*,*的位置比較隨意能夠挨着 function 關鍵字，也能夠挨着函數名，看我的喜愛。java

yield 產出的意思，這個關鍵字只能出如今生成器函數體內，可是生成器中也能夠沒有 yield 關鍵字，函數遇到 yield 的時候會暫停，並把 yield 後面的表達式結果拋出去。git

next做用是將代碼的控制權交還給生成器函數。es6

// 聲明生成器函數
function* generator() {
    // A
    yield 'foo'
    // B
}
// 獲取生成器對象
let g = generator();
// 第一個 next()，首次啓動生成器
g.next(); // {value: "foo", done: false}
// 喚醒被 yield 暫停的狀態
g.next();
// {value: undefined, done: true}

讀完上面的代碼有沒有感受生成器好像個又懶又胖的人，每次必須推他一下才會走一點點，直到盡頭。我對生成器的誤解，生成器可能實際上超級屌的。github

固然，生成器和迭代器有點曖昧的關係，好像生成器就是迭代器，尚未仔細學習過 Iterator，在此不展開，自行了解。面試

yield & next 生成器內外勾結

上面的代碼片斷，咱們知道了 next()的返回值的 value部分就是 yield 後面的表達式。實際上 next()也能夠向生成器內部傳遞某些數據。編程

function* generator(txt) {
    console.log(txt); // 2
    let result01 = yield '我是一步';
    console.log(result01); // 4
    // return;
}

let g = generator('你是誰?');
console.log('對話開始~~'); // 1
let step01 = g.next();
console.log(step01.value);// 3
g.next('歡迎打賞')；
console.log('對話結束~~'); // 5

來來一圖勝千言，我作了一個並不嚴謹的 low 圖，😤真醜啊。對不對我也不能保證。json

須要注意的一點是，第一個 next()只是爲了啓動生成器，若是你嘗試給此處的它傳遞點東西是沒用的。

經過上圖，但願讀到這裏的小夥伴理解了生成器的執行流程以及 yield 和 next 是如何相互傳遞數據的。

Generator 結合異步處理

開篇也說，Generator 是爲了異步而生的，那咱們就簡單看下如何進行異步處理。額，其實 async await 已經很完美了。

function* gen () {
  let url = 'https://api.github.com/users/github'
  let result = yield fetch(url)
  console.log(result.bio)
  // 請求2必須等請求1拿到結果，下面的代碼是僞代碼
  yield fetch('xxxxxx?name=' + result.bio)
}

let g = gen()
let result = g.next()

result
  .value
  .then(function (data) {
    return data.json()
  })
  .then(function (data) {
    g.next(data)
  })
  g.next();

寫到這裏有點感悟，普通函數一旦執行，函數外部是沒法干預函數體內部的流程的只能等函數執行完成，而生成器函數經過 yield 和 next 相互傳遞數據能夠控制函數體內的代碼流程，忽然感受 Generator 並非一無可取呢~。異步代碼參考了Promise,Generator（生成器）,async（異步）函數

其餘

Generator 還有兩點比較好玩的，異常處理，該部份內容請查閱阮一峯老師的文章自學。
生成器出了能夠調用next()、還可使用 throw()、return()，也請自學。

🌚 前端學習QQ羣: 538631558 🌚

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。