您好,登錄后才能下訂單哦!
本文實(shí)例講述了ES6 Generator函數(shù)的應(yīng)用。分享給大家供大家參考,具體如下:
Generator 函數(shù)是 一種異步編程解決方案,Generator 函數(shù)會返回一個(gè)遍歷器對象,Generator 函數(shù)是一個(gè)普通函數(shù),但是有兩個(gè)特征。一是,function關(guān)鍵字與函數(shù)名之間有一個(gè)星號;二是,函數(shù)體內(nèi)部使用yield表達(dá)式。
認(rèn)識generator函數(shù)
function * fn() { console.log('hello'); return 'Joh'; } // 執(zhí)行fn()時(shí)不會直接執(zhí)行方法體中的代碼,它會返回一個(gè)指針, 這個(gè)指針實(shí)現(xiàn)了 interator接口,也就是返回一個(gè)interator對象 let it = fn(); // 通過調(diào)用next就會執(zhí)行方法體, 返回結(jié)果是 {value:'Joh', done:true}, 其中next返回的是函數(shù)體中return的值 let res = it.next(); console.log(res);
generator函數(shù)中的yield 與 return
function * fn() { // 和yield相配合,把一個(gè)generator內(nèi)部分為幾個(gè)斷點(diǎn)來執(zhí)行,每個(gè)斷點(diǎn)就是yield語句 // 注意 yield和return的區(qū)別: yield可以有多個(gè),return只能有1個(gè) yield 1; yield 2; yield 3; return 4; // 可以沒有return值,done為true的value將會是undefined } let it = fn(); // 在for-of 循環(huán)中只能打印done為false的value值,done為true時(shí),程序終止 for(let v of it) { console.log(v); // 分別輸出 1 2 3 }
yield 的值與賦值語句
function * fn(_name) { let name = yield _name; // yield 的默認(rèn)值為undefined return name; } let it = fn('Joh'); console.log(it.next()); // {value:'Joh', done:false} console.log(it.next('Tom')); // {value:'Tom', done:true} // 此處value應(yīng)該為undefined,但是通過next參數(shù)的形式賦值改變了最后一個(gè)值 console.log(it.next('Lily')); // {value: undefined, done:true} // 已經(jīng)循環(huán)完畢,即使傳值也是undefined
yield 語句的位置與括號
function sum(a, b) { return a + b; } function * fn() { let res = sum(yield 1, 5 + (yield 3)); console.log(res); console.log('my qq: ' + (yield qq)); // yield 在一個(gè)語句中需要括起來 } fn();
yield 異常捕獲
異常捕獲的方式1:
function * fn() { let qq = yield; // yield 默認(rèn)返回undefined, 不會拋出異常 console.log(qq); } let g = fn(); g.next(); // 第一個(gè)斷點(diǎn)沒有輸出 // g.next('qq 11111'); // 完畢之后傳值輸出:qq 11111 g.throw('error!'); // Uncaught error!
異常捕獲的方式2:
function * fn() { let qq; try { qq = yield; // yield 默認(rèn)返回undefined }catch(e){ console.log('qq have error'); }finally{ console.log(qq); } } let g = fn(); g.next(); g.throw('error!'); // qq have error // undefined
異常捕獲的方式3:
function * fn() { let qq; qq = yield; console.log(qq); } let g = fn(); g.next(); try{ g.throw('error!'); }catch(e){ console.log('qq have error!'); }
異常捕獲的方式4:
function * fn() { let qq; try { qq = yield ff; // ff 未定義, 所以qq不會被正確賦值 此處是非 yield 的異常 }catch(e){ console.log('err1'); } console.log(qq); } let g = fn(); g.next(); g.next('qq 5554'); // err1 // undefined
利用generator和promise結(jié)合使用,讓異步的邏輯關(guān)系,使用同步的方式書寫
function asyncF(name) { return new Promise(function(resolve){ setTimeout(function(){ resolve('my name is ' + name); }); }); } function * fn() { console.log(yield asyncF('Joh')); } let gf = fn(); function exec(gf,value) { let res = gf.next(value); if(!res.done) { if(res.value instanceof Promise) { res.value.then(function (v) { exec(gf, v); }) }else{ exec(gf, res.value); } } } exec(gf); // my name is Joh
更復(fù)雜的寫法:
function asyncF(name) { return new Promise(function(resolve){ setTimeout(function(){ resolve('my name is ' + name); }); }); } function sum(a, b) { return new Promise(function (resolve) { setTimeout(function () { resolve(a + b); }); }) } function * fn(name) { if((yield sum(3,5)) > 6) { console.log(yield asyncF(name)); }else{ console.log('error'); } } let gf = fn('Joh'); // generator 執(zhí)行器 相當(dāng)于 tj/co 模塊 function exec(gf,value) { let res = gf.next(value); if(!res.done) { if(res.value instanceof Promise) { res.value.then(function (v) { exec(gf, v); }) }else{ exec(gf, res.value); } } } exec(gf); // my name is Joh
使用純promise實(shí)現(xiàn):
function asyncF(name) { return new Promise(function(resolve){ setTimeout(function(){ resolve('my name is ' + name); }); }); } function sum(a, b) { return new Promise(function (resolve) { setTimeout(function () { resolve(a + b); }); }) } function fn(name) { sum(3,5) .then(function (num) { if(num > 6) { asyncF(name) .then(function (v) { console.log(v); }) }else{ console.log('error'); } }) } fn('Joh');
使用co模塊,來代替自己寫的執(zhí)行器
var co = require('co'); function asyncF(name) { return new Promise(function(resolve){ setTimeout(function(){ resolve('my name is ' + name); }); }); } function sum(a, b) { return new Promise(function (resolve) { setTimeout(function () { resolve(a + b); }); }) } function * fn(name) { if((yield sum(3,5)) > 6) { console.log(yield asyncF(name)); }else{ console.log('error'); } } var fnx = co.wrap(fn); fnx('Joh'); // my name is Joh
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。