ES6 Generator基本使用方法示例
本文实例讲述了ES6Generator基本使用方法。分享给大家供大家参考,具体如下:
1.Generator介绍
先来一段Generator的基础代码
function*g(){ yield100; yield200; return300; } letgg=g(); console.log(gg);//Object[Generator]{} console.log(gg.next());//{value:100,done:false} console.log(gg.next());//{value:200,done:false} console.log(gg.next());//{value:300,done:true} console.log(gg.next());//{value:undefined,done:true}
首先我们看到:
- Generator是由functinon*定义的,在generator内部可以使用yield
- Generator不是函数,而是一个对象,并且在执行开始就进入暂停状态,而不是直接执行全部操作
- 通过next()来执行下一步操作,返回的都是{value:xxx,done:xxx}这样的形式,value代表上一次操作返回的值,done有两个值,一个是true,一个是false,表示整个流程是否全部结束。
2.Generator异步编程
generator是ES6中引入的异步解决方案,我们来看看它与promise处理异步的对比,来看它们的差异。
//这里模拟了一个异步操作 functionasyncFunc(data){ returnnewPromise(resolve=>{ setTimeout( function(){ resolve(data) },1000 ) }) }
promise的处理方式:
asyncFunc("abc").then(res=>{ console.log(res);//"abc" returnasyncFunc("def") }).then(res=>{ console.log(res);//"def" returnasyncFunc("ghi") }).then(res=>{ console.log(res);//"ghi" })
generator的处理方式:
function*g(){ constr1=yieldasyncFunc("abc"); console.log(r1);//"abc" constr2=yieldasyncFunc("def"); console.log(r2);//"def" constr3=yieldasyncFunc("ghi"); console.log(r3);//"ghi" } letgg=g(); letr1=gg.next(); r1.value.then(res=>{ letr2=gg.next(res); r2.value.then(res=>{ letr3=gg.next(res); r3.value.then(res=>{ gg.next(res) }) }) })
promise多次回调显得比较复杂,代码也不够简洁,generator在异步处理上看似同步的代码,实际是异步的操作,唯一就是在处理上会相对复杂,如果只进行一次异步操作,generator更合适。
3.yield和yield*
先来看两段代码
function*g1(){ yield100; yieldg2(); return400; } function*g2(){ yield200; yield300; } letgg=g1(); console.log(gg.next());//{value:100,done:false} console.log(gg.next());//{value:Object[Generator]{},done:false} console.log(gg.next());//{value:400,done:true} console.log(gg.next());//{value:undefined,done:true}
function*g1(){ yield100; yield*g2(); return400; } function*g2(){ yield200; yield300; } letgg=g1(); console.log(gg.next());//{value:100,done:false} console.log(gg.next());//{value:200,done:false} console.log(gg.next());//{value:300,done:false} console.log(gg.next());//{value:400,done:true}
yield对另一个generator不会进行遍历,返回的是迭代器对象,而yield*会对generator进行遍历迭代。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。