Generator(生成器) 學(xué)習(xí)理解與實(shí)踐

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

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

created at 2019-04-08

總結(jié)

異步編程解決方案

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

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

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

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

(yield 表達(dá)式) 整個(gè)沒(méi)有返回值，next()的參數(shù)可以被認(rèn)為是上一個(gè)yield的返回值。

V8引擎直接忽略第一次next()的參數(shù)，因?yàn)闆](méi)有上一次yield

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

當(dāng)next的返回值的value屬性為yield后表達(dá)式的結(jié)果或return后的值，done屬性為true時(shí)表示遍歷yield結(jié)束

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

yield* 用于在一個(gè)generator函數(shù)中執(zhí)行另一個(gè)generator函數(shù)，并且會(huì)將另一個(gè)的yield全部執(zhí)行完畢才會(huì)繼續(xù)執(zhí)行當(dāng)前generator中的yield

基礎(chǔ)語(yǔ)法

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

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

/*
* 第一次調(diào)用是從函數(shù)頭部開(kāi)始執(zhí)行，如果沒(méi)有yield，也需要執(zhí)行一次next才會(huì)執(zhí)行這些語(yǔ)句
*/
console.log(gt.next());
// 第一個(gè)yield之前的語(yǔ)句
// {value: "yield 1", done: false}

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

console.log(gt.next());
// {value: "yield 3: 在表達(dá)式中要加括號(hào)undefined", done: false}
// 上面出現(xiàn)undefined的原因是next沒(méi)有加參數(shù)

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

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

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

鏈接

給原生對(duì)象添加Iterator

先展示for of 對(duì)generator的作用

function* generatorForOf(){
    yield 1;
    yield 2;
    return 3;
}
/*
* for of 可以遍歷Generator生成的Iterator對(duì)象
* 這里不能再遍歷 gt 因?yàn)樗褕?zhí)行完畢
* 不會(huì)遍歷return的值
*/
for (let item of generatorForOf()) {
    console.log("for of :", item);
}

給原生對(duì)象添加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);
}

應(yīng)用場(chǎng)景 異步ajax請(qǐng)求

代碼中的loading函數(shù)代碼行數(shù)較多，也并非關(guān)鍵代碼，所以不作展示。查看loading代碼

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

function requestData(callback) {
    function ajaxFn() {
        setTimeout(() => {
            ar.next("ajax返回結(jié)果")
        }, 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()

本文包括對(duì)generate基礎(chǔ)的學(xué)習(xí)與練習(xí)，與一些心得！【會(huì)持續(xù)學(xué)習(xí)，更新】

詳細(xì)學(xué)習(xí)請(qǐng)移步下方參考鏈接

參考:

參考文章