本文實例講述了ES6 Generator函數的應用。分享給大家供大家參考，具體如下：
Generator 函數是 一種異步編程解決方案，Generator 函數會返回一個遍歷器對象，Generator 函數是一個普通函數，但是有兩個特征。一是，function關鍵字與函數名之間有一個星號；二是，函數體內部使用yield表達式。
認識generator函數
function * fn() { console.log('hello'); return 'Joh';}// 執行fn()時不會直接執行方法體中的代碼，它會返回一個指針, 這個指針實現了 interator接口，也就是返回一個interator對象let it = fn();// 通過調用next就會執行方法體, 返回結果是 {value:'Joh', done:true}, 其中next返回的是函數體中return的值let res = it.next();console.log(res);generator函數中的yield 與 return
function * fn() { // 和yield相配合，把一個generator內部分為幾個斷點來執行，每個斷點就是yield語句 // 注意 yield和return的區別： yield可以有多個，return只能有1個 yield 1; yield 2; yield 3; return 4; // 可以沒有return值，done為true的value將會是undefined}let it = fn();// 在for-of 循環中只能打印done為false的value值，done為true時,程序終止for(let v of it) { console.log(v); // 分別輸出 1 2 3}yield 的值與賦值語句
function * fn(_name) { let name = yield _name; // yield 的默認值為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應該為undefined，但是通過next參數的形式賦值改變了最后一個值console.log(it.next('Lily')); // {value: undefined, done:true} // 已經循環完畢，即使傳值也是undefinedyield 語句的位置與括號
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 在一個語句中需要括起來}fn();yield 異常捕獲
異常捕獲的方式1：
function * fn() { let qq = yield; // yield 默認返回undefined, 不會拋出異常 console.log(qq);}let g = fn();g.next(); // 第一個斷點沒有輸出// g.next('qq 11111'); // 完畢之后傳值輸出：qq 11111g.throw('error!'); // Uncaught error!異常捕獲的方式2：
function * fn() { let qq; try { qq = yield; // yield 默認返回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結合使用，讓異步的邏輯關系，使用同步的方式書寫
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更復雜的寫法：
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 執行器 相當于 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實現：
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模塊，來代替自己寫的執行器
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希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
