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

Travis 發(fā)布于2019-08-23 16:48 / 607人閱讀

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

created at 2019-04-08

總結

異步編程解決方案

可理解為一種狀態(tài)機，封裝了多個內(nèi)部狀態(tài)

可返回一個指向內(nèi)部狀態(tài)的指針對象（遍歷器對象Interator），所以可理解為其是一個遍歷器對象生成函數(shù)

yield(產(chǎn)出),定義不同的內(nèi)部狀態(tài)，yield后跟表達式。

yield 表達式只能放在Generator函數(shù)中

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

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

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

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

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

yield* 用于在一個generator函數(shù)中執(zhí)行另一個generator函數(shù)，并且會將另一個的yield全部執(zhí)行完畢才會繼續(xù)執(zhí)行當前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);
// 遍歷器對象

/*
* 第一次調(diào)用是從函數(shù)頭部開始執(zhí)行，如果沒有yield，也需要執(zhí)行一次next才會執(zhí)行這些語句
*/
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}
// 上面出現(xiàn)undefined的原因是next沒有加參數(shù)

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

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

實現(xiàn)斐波拉契數(shù)列

鏈接

給原生對象添加Iterator

先展示for of 對generator的作用

function* generatorForOf(){
    yield 1;
    yield 2;
    return 3;
}
/*
* for of 可以遍歷Generator生成的Iterator對象
* 這里不能再遍歷 gt 因為它已執(zhí)行完畢
* 不會遍歷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函數(shù)代碼行數(shù)較多，也并非關鍵代碼，所以不作展示。查看loading代碼

初始數(shù)據(jù)

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基礎的學習與練習，與一些心得！【會持續(xù)學習，更新】

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

參考:

參考文章

歡迎交流 Github

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103321.html

co源碼分析及其實踐

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

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

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

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

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

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

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

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

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

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