ES6 Generator函数的应用实例分析

前端  /  管理员 发布于 5年前   564

本文实例讲述了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 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相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

• Es6 Generator函数详细解析
• ES6中的迭代器、Generator函数及Generator函数的异步操作方法
• 详解JavaScript ES6中的Generator
• JavaScript中 ES6 generator数据类型详解
• ES6新特性三： Generator(生成器)函数详解
• ES6中Generator与异步操作实例分析
• 详谈ES6中的迭代器(Iterator)和生成器(Generator)
• ES6 系列之 Generator 的自动执行的方法示例
• 详解ES6之async+await 同步/异步方案
• ES6记录异步函数的执行时间详解
• 详解ES6中的三种异步解决方案
• JS基于ES6新特性async await进行异步处理操作示例