本文實例講述了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} // 已經循環完畢，即使傳值也是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 在一個語句中需要括起來
}
fn();
yield 異常捕獲
異常捕獲的方式1：
function * fn() {
let qq = yield; // yield 默認返回undefined, 不會拋出異常
console.log(qq);
}
let g = fn();
g.next(); // 第一個斷點沒有輸出
// g.next('qq 11111'); // 完畢之后傳值輸出：qq 11111
g.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相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
