Generator函數(shù)的概念 -> yield 關(guān)鍵字的解析 -> async 函數(shù)(async,await)

參考鏈接:http://www.ruanyifeng.com/blog/2015/04/generator.html 阮一峰先生的一篇日志

function* gen(x){
          var y = yield x + 2;
          return y;
        }
        var g = gen(1);
        g.next() // { value: 3, done: false }
        g.next() // { value: undefined, done: true} 

上面代碼中,調(diào)用 Generator 函數(shù),會(huì)返回一個(gè)內(nèi)部指針(即遍歷器)g 。這是 Generator 函數(shù)不同于普通函數(shù)的另一個(gè)地方,即執(zhí)行它不會(huì)返回結(jié)果,返回的是指針對(duì)象。調(diào)用指針 g 的 next 方法,會(huì)移動(dòng)內(nèi)部指針(即執(zhí)行異步任務(wù)的第一段),指向第一個(gè)遇到的 yield 語句,上例是執(zhí)行到 x + 2 為止。
換言之,next 方法的作用是分階段執(zhí)行 Generator 函數(shù)。每次調(diào)用 next 方法,會(huì)返回一個(gè)對(duì)象,表示當(dāng)前階段的信息( value 屬性和 done 屬性)。value 屬性是 yield 語句后面表達(dá)式的值,表示當(dāng)前階段的值;done 屬性是一個(gè)布爾值,表示 Generator 函數(shù)是否執(zhí)行完畢,即是否還有下一個(gè)階段。

http://www.html-js.com/article/1711 yield 原理篇

如下示例代碼,在瀏覽器中打斷點(diǎn)可以一窺 yield 執(zhí)行方法

function* fib2(){
yield 0;//狀態(tài)0,第一次調(diào)用next,返回0,并改變狀態(tài)
yield 1;//狀態(tài)1,第二次調(diào)用next,返回1,并改變狀態(tài)
var p1 = 0
    ,p2 =1
    ,cur = p1+p2;
while(true){
    yield cur;//狀態(tài)2,后面調(diào)用next,返回相應(yīng)的幾個(gè),狀態(tài)不在改變
    p1 = p2;
    p2 = cur;
    cur = p1+p2;
}
}
var fibIter2 = fib2();
for(var i =0;i<8;i++){
    console.log(fibIter2.next().value);
} 

進(jìn)階示例
示例1:

function* gen(x){
          var y = yield x + 2;
          return y;
        }
        var g = gen(1);
        console.log(g.next()) // { value: 3, done: false }
        console.log(g.next()) //{ value: undefined, done: true}
        console.log(g.next()) // { value: undefined, done: true}

示例2:

//Iterator 遍歷
//Generator(生成器)是ES6標(biāo)準(zhǔn)引入的新的數(shù)據(jù)類型。一個(gè)generator看上去像一個(gè)函數(shù),但可以返回多次
//1.類似于將異步變成同步,使函數(shù)可以按順序依次執(zhí)行,用的已經(jīng)不多了,有新的東西替代了

let xiaochuan = function*(){
yield "冰淇淋";
yield "漢堡";
}
// console.log(xiaochuan().next());//Object {value: "冰淇淋", done: false}
const result =  xiaochuan();
console.log(result.next());//Object {value: "冰淇淋", done: false}
console.log(result.next());//Object {value: "漢堡", done: false}
console.log(result.next());//Object {value: undefined, done: true}

總結(jié):yield 執(zhí)機(jī)制是這樣的:yield 返回的是一個(gè)指針對(duì)象 .next() 執(zhí)行 -> 發(fā)現(xiàn) yeild 語句執(zhí)行后返回,返回的值便是當(dāng)時(shí)這個(gè)階段 后面表達(dá)式的值,直到執(zhí)行完畢 done:true 為止。

擴(kuò)展出如下的示例:

http://www.ruanyifeng.com/blog/2015/05/async.html async 函數(shù)的含義和用法(阮一峰先生的日志)

前文有一個(gè) Generator 函數(shù),依次讀取兩個(gè)文件。

var fs = require('fs');
var readFile = function (fileName){
    return new Promise(function (resolve, reject){
      fs.readFile(fileName, function(error, data){
      if (error) reject(error);
      resolve(data);
    });
  });
};
var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

寫成 async 函數(shù),就是下面這樣。

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 異步編程對(duì)JavaScript語言太重要。Javascript語言的執(zhí)行環(huán)境是“單線程”的,如果沒有異步編程,根本...
    呼呼哥閱讀 7,399評(píng)論 5 22
  • 在此處先列下本篇文章的主要內(nèi)容 簡(jiǎn)介 next方法的參數(shù) for...of循環(huán) Generator.prototy...
    醉生夢(mèng)死閱讀 1,486評(píng)論 3 8
  • 本文作者就是我,簡(jiǎn)書的microkof。如果您覺得本文對(duì)您的工作有意義,產(chǎn)生了不可估量的價(jià)值,那么請(qǐng)您不吝打賞我,...
    microkof閱讀 23,844評(píng)論 16 78
  • 簡(jiǎn)介 基本概念 Generator函數(shù)是ES6提供的一種異步編程解決方案,語法行為與傳統(tǒng)函數(shù)完全不同。本章詳細(xì)介紹...
    呼呼哥閱讀 1,134評(píng)論 0 4
  • 昨天送走敏兒竟然哭了 晚上和她視頻竟然不嫌煩了 我真是欠虐啊 不過一天沒回家竟然又屁顛屁顛歡天喜地回家去了 麻麻給...
    角落蜷縮閱讀 263評(píng)論 0 0

友情鏈接更多精彩內(nèi)容