参考文档

Generator是ES6的新特性,通过yield关键字,可以让函数的执行流挂起,那么便为改变执行流程提供了可能。

创建Generator

function * main() {
var x = yield 1;
var y = yield 2;
var z = yield 3;
}

使用以上语法就可以声明一个generator,注意main是一个函数

判断是否为generator

function isGen(fn) {
return 'function' === typeof fn && fn.constructor.name === 'GeneratorFunction';
}

generator的构造器

main.constructor //function GeneratorFunction() { [native code] }

Generator Object

生成Generator Object

var g= main();
console.info(typeof g)

g是Generator Object,在MDN上称为generator-iterator

Generator Object方法

next

虽然main被调用了,但是并没有执行里面的方法体,而是返回了一个Generator Object,如何调用里面的方法体呢,这就要使用next方法

console.log(g.next());//{value: 1, done: false}

next方法在es6中定义如下

The next function’s behavior is:

1.If this is not a generator object, Throw Error

2.Call this.[[Send]] with single argument undefined

3.Return the result

next方法会执行函数体,直到遇到第一个yield语句,然后挂起函数执行,等待后续调用。但是next会返回一个对象,这个对象有2个key,value表示yield语句后面的表达式的值('hello'),done是个布尔值,表示函数体是否已经执行结束。再次调用g。next时,执行流在挂起的地方继续执行,直到遇到第2个yield,依次类推。

console.log(g.next());//{value: 2, done: false}
console.log(g.next());//{value: 3, done: false}
console.log(g.next());//{value: undefined, done: true}

Tips:有时候我们把yield看成是return

next方法也接受传参,传入参数作为yield语句的返回值;

function *main() {
var x = yield 1;
console.log(x)
} var g=main();
g.next();
g.next("hello world") //hello world

next方法的特性很总要,很多基于generator做的流程控制都基于这个特性。

异常处理

function * main(){
yield;a+b
} var m=main() m.next()
m.next() //Uncaught ReferenceError: a is not defined

我们可以使用catch捕获异常

yield 和 yield*

yield* 是委托提取器。yield 是你给什么它提取什么,但是 yield* 会继续向下请求,直到没的提取为止。

function* a() { yield 1; yield 2; yield 3; }
function* b() { yield 4; yield* a(); yield 5; }
function* c() { yield 6; yield* b(); yield 7; } var cc = c(); cc.next(); // {value: 6, done: false}
cc.next(); // {value: 4, done: false}
cc.next(); // {value: 1, done: false}
cc.next(); // {value: 2, done: false}
cc.next(); // {value: 3, done: false}
cc.next(); // {value: 5, done: false}
cc.next(); // {value: 7, done: false}
cc.next(); // {value: undefined, done: true}

DEMO

function * G () {
console.log(yield function () {
console.log("func");
});
} var g = G(); console.log(g.next());
//{ value: [Function], done: false }
console.log(g.next("hi"));
//hi
//{ value: undefined, done: true }

支持情况

  • Chrome 35+ (about://flags中开启)
  • Firefox 31+ (默认开启)
  • nodejs harmony

ES6 generator 基础的更多相关文章

  1. es6 generator 基础知识

    1.定义和使用 function *gen() { return 'first generator'; } // 有点类似类的实例化过程 let generatorResult = gen() // ...

  2. es6常用基础合集

    es6常用基础合集 在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得 ...

  3. es6 generator函数的异步编程

    es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢? 1.thunk函数    将函数 ...

  4. ES6 Generator vs ES6 async/await

    ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...

  5. ES6 Generator的应用场景

    一.基础知识 API文档 ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个 ...

  6. es6 --- Generator 函数

    第一部分,ES6 中的 Generator 在 ES6 出现之前,基本都是各式各样类似Promise的解决方案来处理异步操作的代码逻辑,但是 ES6 的Generator却给异步操作又提供了新的思路, ...

  7. ES6生成器基础

    ES6引进的最令人兴奋的特性就是一种新的函数生成方式,称为生成器(generator).名称有点奇怪,但是第一眼看上去行为更加奇怪.文章主要介绍生成器如何工作,然后让你明白为什么他们对于未来的JS会有 ...

  8. es6属性基础教学,30分钟包会

    ES6基础智商划重点在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译.ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得高 ...

  9. es6 generator函数

    es6 新增了Generator函数,一种异步编程的解决方案 回顾一下,es6 提供了新的遍历方法,for of ,适用于各种数据集合,统一了遍历操作,原生支持for of 集合的数据集合有.数组,字 ...

随机推荐

  1. 使用struts2完成ckeditor和图片上传

    代码地址如下:http://www.demodashi.com/demo/12427.html 使用struts2完成ckeditor和ckeditor图片上传 ckeditor版本ckeditor_ ...

  2. C#中的Dictionary字典类常用方法介绍

    using System.Collections.Generic;//引用命名空间//Dictionary可以理解为散列集合 public class DictionaryTest { public ...

  3. Redis(十):使用RedisTemplate执行Redis脚本

    对于Redis脚本使用过的同学都知道,这个主要是为了防止竞态条件而用的.因为脚本是顺序执行的.(不用担心效率问题)比如我在工作用,用来设置考试最高分. 如果还没有用过的话,先去看Redis脚本的介绍, ...

  4. HDU 2473 Junk-Mail Filter 删点并查集

    题目来源:pid=2473">HDU 2473 Junk-Mail Filter 题意:2中操作 M x, y 将x,y 合并到一个集合 S x 将x从所在的集合去掉 自己成为一个集合 ...

  5. 果园里有一堆苹果,一共n头(n大于1小于9)熊来分,第一头为小东,它把苹果均分n份后,多出了一个,它扔掉了这一个,拿走了自己的一份苹果,接着第二头熊重复这一过程,即先均分n份,扔掉一个然后拿走一份,以此类推直到最后一头熊都是这样(最后一头熊扔掉后可以拿走0个,也算是n份均分)。问最初这堆苹果最少有多少个。

    include "stdafx.h" // ConsoleApplication12.cpp : 定义控制台应用程序的入口点. // #include<iostream> ...

  6. JQuery利用选择器定位动态id?

    假如我们需要去定位一个动态生成的div,我们需要为它指定一个动态的id 例如: 前台使用EL进行迭代LIST生成div,为其添加动态的id,生成之后变成下面样式 <div id="tz ...

  7. jquery 滚动效果插件

    1.css <style> .fl { float: left; } .slider0 img { display: block; width:100px; padding: 2px; } ...

  8. Android - 使用messager实现进程间通信(服务器端→客户端,客户端→服务器端双向)

    之前看了一篇,然后不自己动手肯定是不行的,然后自己又写了一遍. 背景: 一般使用messenger进行进程间通信的时候,我们只能进行单方向通信.但是有没有办法让服务器端和客户端进行双向通信呢? 解决思 ...

  9. java 邮件(2)

    /**  * 方法描述:发送带附件的邮件  *   * @throws UnsupportedEncodingException  */  public static boolean sendEmai ...

  10. iOS程序自动检测更新的实现

      本文转载至 http://blog.csdn.net/davidsph/article/details/8931718 App Store自动更新itunes     之前项目需要用到app自动更 ...