ES6中Generator与异步操作实例分析

 更新时间:2017年03月31日 11:40:47   作者:柒青衿  
这篇文章主要介绍了ES6中Generator与异步操作,结合实例形式分析Generator的概念、功能及相关操作技巧,需要的朋友可以参考下

本文实例讲述了ES6中Generator与异步操作。分享给大家供大家参考,具体如下:

Generator与异步操作

1.Generator概念

可以把Generator理解成一个状态机(好像React中有很多state),封装了多个内部状态。执行Generator返回的是一个遍历器对象,可以遍历Generator产生的每一个状态。在function后加*就可以声明一个Generator函数。

function* hiGenerator(){
yield 'hi';
yield 'ES5';
return '!';
}
var hi = hiGenerator();
console.log(hi); //hiGenerator {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
console.log(hi.next()); //Object {value: "hi", done: false}
console.log(hi.next()); //Object {value: "ES5", done: false}
console.log(hi.next()); //Object {value: "!", done: true}

2.yield语句

由于Generator函数返回的遍历器对象,只有调用next()方法才会遍历到下一个状态,所以其实提供了一种可以暂停的执行函数。每次执行next(),遇到yield语句就暂停执行,且将yield后的表达式的值作为返回的对象的value值;如果没有遇到yield,则返回return语句作为返回对象的value值;如果没有return,则返回对象的value值为undefined。

3.next方法

next()方法可以带一个参数,该参数会被当做上一条yield语句的返回值。

function* add(c, d){
var a = 0;
a = yield a + c;
a = yield a + d;
return
}
var sum = add(1, 2);
console.log(sum); //add {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
console.log(sum.next()); //Object {value: 1, done: false}
console.log(sum.next()); //Object {value: NaN, done: false}
console.log(sum.next()); //Object {value: undefined, done: true}

如果不给next()传参,会使得下一步计算无法进行。

function* add(c, d){
var a = 0;
a = yield a + c;
a = yield a + d + 1;
return
}
var sum = add(1, 2);
console.log(sum); //add {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
console.log(sum.next()); //Object {value: 1, done: false}
console.log(sum.next(1)); //Object {value: 4, done: false}
console.log(sum.next(3)); //Object {value: undefined, done: true}

4.用for..of...遍历Generator

用for..of...遍历Generator时候,不需要显示调用next()方法。

5.一个Generator函数产生的遍历器对象g调用return方法后,返回对象的value属性为return方法的参数。

6.在一个Generator函数内部调用另一个Generator函数。需要使用yield*。

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

相关文章

  • JavaScript自定义文本框光标

    JavaScript自定义文本框光标

    本篇文章主要介绍了JavaScript自定义文本框光标的方法实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js结合正则实现国内手机号段校验

    js结合正则实现国内手机号段校验

    这篇文章主要介绍了js结合正则实现国内手机号段校验的方法以及使用js和jQuery实现的简单校验手机号的示例,非常简单实用,有需要的小伙伴可以参考下。
    2015-06-06
  • javascript 弹出层组件(升级版)

    javascript 弹出层组件(升级版)

    前面文章里写过一个弹出层对话框,但ie6下有bug,根本没有实现position:fixed的效果,当时没有真实ie6环境,测试疏忽,匆匆放到博客上,还让一些读者看到甚至使用,在这里表示万分抱歉啊
    2011-05-05
  • JavaScript 异步时序问题

    JavaScript 异步时序问题

    这篇文章主要介绍了JavaScript 异步时序问题,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-11-11
  • BootStrap下拉菜单和滚动监听插件实现代码

    BootStrap下拉菜单和滚动监听插件实现代码

    这篇文章主要介绍了BootStrap下拉菜单和滚动监听插件实现代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • js中位运算的运用实例分析

    js中位运算的运用实例分析

    这篇文章主要介绍了js中位运算的运用实例分析,需要的朋友可以参考下
    2018-12-12
  • 微信小程序实现贪吃蛇游戏

    微信小程序实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了微信小程序实现贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js获取对象为null的解决方法

    js获取对象为null的解决方法

    js获取对象为null的情况,想必很多的朋友都有遇到过吧,只要是js对字符串的解析跟对数字串的解析还是不太一样,这是需要注意的地方
    2013-11-11
  • JS如何生成一个不重复的ID的函数

    JS如何生成一个不重复的ID的函数

    这篇文章主要介绍了JS如何生成一个不重复的ID的函数,非常不错,具有参考借鉴价值,需要的朋友参考下
    2016-12-12
  • JavaScript JSON数据处理全集(小结)

    JavaScript JSON数据处理全集(小结)

    这篇文章主要介绍了JavaScript JSON数据处理全集,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论