ES6Generator函數(shù)的應(yīng)用實(shí)例分析

本文實(shí)例講述了ES6 Generator函數(shù)的應(yīng)用。分享給大家供大家參考，具體如下：

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對(duì)外擴(kuò)展宣傳的重要窗口，一個(gè)合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺(tái)，成都創(chuàng)新互聯(lián)公司面向各種領(lǐng)域：成都房屋鑒定等網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣解決方案、網(wǎng)站設(shè)計(jì)等建站排名服務(wù)。

Generator 函數(shù)是一種異步編程解決方案，Generator 函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象，Generator 函數(shù)是一個(gè)普通函數(shù)，但是有兩個(gè)特征。一是，function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào)；二是，函數(shù)體內(nèi)部使用yield表達(dá)式。

認(rèn)識(shí)generator函數(shù)

function * fn() {
 console.log('hello');
 return 'Joh';
}
// 執(zhí)行fn()時(shí)不會(huì)直接執(zhí)行方法體中的代碼，它會(huì)返回一個(gè)指針, 這個(gè)指針實(shí)現(xiàn)了 interator接口，也就是返回一個(gè)interator對(duì)象
let it = fn();
// 通過調(diào)用next就會(huì)執(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語(yǔ)句
  // 注意 yield和return的區(qū)別： yield可以有多個(gè)，return只能有1個(gè)
  yield 1;
  yield 2;
  yield 3;
  return 4; // 可以沒有return值，done為true的value將會(huì)是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 的值與賦值語(yǔ)句

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 語(yǔ)句的位置與括號(hào)

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è)語(yǔ)句中需要括起來
}
fn();

yield 異常捕獲

異常捕獲的方式1：

function * fn() {
 let qq = yield; // yield 默認(rèn)返回undefined, 不會(huì)拋出異常
 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不會(huì)被正確賦值 此處是非 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錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

分享題目：ES6Generator函數(shù)的應(yīng)用實(shí)例分析
文章位置：http://muchs.cn/article36/iegesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站設(shè)計(jì)、、網(wǎng)頁(yè)設(shè)計(jì)公司、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容