Generator(生成器) 學習理解與實踐

Travis 發布于2019-08-23 16:48 / 581人閱讀

摘要：總結異步編程解決方案可理解為一種狀態機，封裝了多個內部狀態可返回一個指向內部狀態的指針對象遍歷器對象，所以可理解為其是一個遍歷器對象生成函數產出定義不同的內部狀態，后跟表達式。

created at 2019-04-08

總結

異步編程解決方案

可理解為一種狀態機，封裝了多個內部狀態

可返回一個指向內部狀態的指針對象（遍歷器對象Interator），所以可理解為其是一個遍歷器對象生成函數

yield(產出),定義不同的內部狀態，yield后跟表達式。

yield 表達式只能放在Generator函數中

(yield 表達式) 整個沒有返回值，next()的參數可以被認為是上一個yield的返回值。

V8引擎直接忽略第一次next()的參數，因為沒有上一次yield

調用next方法，是指針從函數頭部或上一次停止的地方開始執行，直到遇到下一個yield表達式或return

當next的返回值的value屬性為yield后表達式的結果或return后的值，done屬性為true時表示遍歷yield結束

對象中使用const obj = { myGeneratorMethod(){} } 等同于 obj = { myGeneratorMethod：function (){} }

yield* 用于在一個generator函數中執行另一個generator函數，并且會將另一個的yield全部執行完畢才會繼續執行當前generator中的yield

基礎語法

 function* generatorTest() {
    console.log("第一個yield之前的語句");
    yield "yield 1"
    yield "yield 3: 在表達式中要加括號" + (yield "yield 2: in expression")
    console.log("yield 之后 return之前");
    return "return"
}

const gt = generatorTest()
console.log(gt);
// 遍歷器對象

/*
* 第一次調用是從函數頭部開始執行，如果沒有yield，也需要執行一次next才會執行這些語句
*/
console.log(gt.next());
// 第一個yield之前的語句
// {value: "yield 1", done: false}

console.log(gt.next());
// {value: "yield 2: in expression", done: false}

console.log(gt.next());
// {value: "yield 3: 在表達式中要加括號undefined", done: false}
// 上面出現undefined的原因是next沒有加參數

console.log(gt.next());
// yield 之后 return之前
// {value: "return", done: true}

console.log(gt.next());
// {value: "undefined", done: true}

實現斐波拉契數列

鏈接

給原生對象添加Iterator

先展示for of 對generator的作用

function* generatorForOf(){
    yield 1;
    yield 2;
    return 3;
}
/*
* for of 可以遍歷Generator生成的Iterator對象
* 這里不能再遍歷 gt 因為它已執行完畢
* 不會遍歷return的值
*/
for (let item of generatorForOf()) {
    console.log("for of :", item);
}

給原生對象添加iterator, 讓其可以被for of 遍歷

function* objectAddIterator(obj) {
    const props = Reflect.ownKeys(obj)

    for (const key of props) {
        yield [key, obj[key]]
    }
}

const nativeObj = {
    a: 12,
    b: 34,
    [Symbol("symbol c")]: 3
}

for (const [key, value] of objectAddIterator(nativeObj)) {
    console.log(typeof key === "symbol" ? key.description : key, value);
}

應用場景 異步ajax請求

代碼中的loading函數代碼行數較多，也并非關鍵代碼，所以不作展示。查看loading代碼

初始數據

function requestData(callback) {
    function ajaxFn() {
        setTimeout(() => {
            ar.next("ajax返回結果")
        }, 2000);
    }

    function* asyncReqData() {
        loading(true)
        const result = yield ajaxFn()
        callback(result)
        loading(false)
    }

    const ar = asyncReqData()
    ar.next()
}

function getSomeList() {
    requestData((res) => {
        document.getElementById("ajax").innerHTML = res
    })
}

控制同步操作的流程

function controlFlow() {
    const child1 = [() => {console.log("--",1); return "return 1"}, () => {console.log("--",2); return "return 2"}]
    const child2 = [() => {console.log("--",3); return "return 3"}, () => {console.log("--",4); return "return 4"}]
    function* generatorControl(child) {
        console.log("===========");
        for (let i = 0; i < child.length; i++) {
            yield child[i]()
        }
    }
    let parent = [{c: child1}, {c: child2}];

    function* parentFn(p){
        for (let i=0; i< p.length; i++){
            yield* generatorControl(p[i].c);
        }
    }

    for (let step of parentFn(parent)) {
        console.log(step);
    }
}

controlFlow()

本文包括對generate基礎的學習與練習，與一些心得！【會持續學習，更新】

詳細學習請移步下方參考鏈接

參考:

參考文章

歡迎交流 Github

GPU云服務器云服務器深度學習與理解機器學習與業務實踐學習實踐微服務架構與實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103321.html

co源碼分析及其實踐

摘要：返回的結果是一個對象，類似于表示本次后面執行之后返回的結果。對象用于一個異步操作的最終完成或失敗及其結果值的表示簡單點說就是處理異步請求。源碼分析主要脈絡函數調用后，返回一個實例。參考鏈接解釋對象的用法的源碼及其用法本文始發于我的個人博客，如需轉載請注明出處。為了更好的閱讀體驗，可以直接進去我的個人博客看。前言知識儲備閱讀本文需要對Generator和Promise有一個基本的...

vincent_xyb 2019-08-22 11:14 評論0 收藏0
生成式對抗網絡（GAN）如何快速理解？

摘要：目前，生成對抗網絡的大部分應用都是在計算機視覺領域。生成對抗網絡生成對抗網絡框架是由等人于年設計的生成模型。在設置中，兩個由神經網絡進行表示的可微函數被鎖定在一個游戲中。我們提出了深度卷積生成對抗網絡的實現。讓我們假設這樣一種情景：你的鄰居正在舉辦一場非常酷的聚會，你非常想去參加。但有要參加聚會的話，你需要一張特價票，而這個票早就已經賣完了。而對于這次聚會的組織者來說，為了讓聚會能夠成功舉...

Leo_chen 2019-04-25 18:24 評論0 收藏0
從零組裝新工具 - Koa2

摘要：返回后，代表操作已完成，記錄結束時間并輸出。從零組裝因為對的學習和使用，知道了自己對于后臺框架的真實需求。所以這回決定不用之內的工具，而是自己從零開始，組裝一個適合自己的框架。就是去和上，尋找一個一個的包并組裝在一起了而已。起因作為一個前端，Node.js算是必備知識之一。同時因為自己需要做一些后臺性的工作，或者完成一個小型應用。所以學習了Node的Express框架，用于輔助和加...

sutaking 2019-08-19 18:11 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規范并可配合使用的寫一個符合規范并可配合使用的理解的工作原理采用回調函數來處理異步編程。 JavaScript怎么使用循環代替(異步)遞歸問題描述在開發過程中，遇到一個需求：在系統初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
ES6學習筆記之Generator函數

摘要：調用函數后和普通函數不同的是，該函數并不立即執行，也不返回函數執行結果，而是返回一個指向內部狀態的對象，也可以看作是一個遍歷器對象。第一個只是用來啟動函數內部的遍歷器，傳參也沒有多大意義。之前斷斷續續接觸到了一些ES6的知識，異步編程方面聽得比較多的就是Promise，直到最近比較系統地學習了ES6的新特性才發現Generator這個神奇的存在，它可以實現一些前所未有的事情，讓我頓時...

cjie 2019-08-21 14:52 評論0 收藏0