es6 generator函数

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了es6 generator函数脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

参考 来ecmascript6 入门》generator部分

认识generator函数

形式上,generator函数有两个特点:一是function关键字与函数名之间有一个*。二是函数体内使用yield语句,如下代码。(yield在英语中意思就是 产出)

function* helloWorld(){
    yield ‘hello’;
    yield ‘world’;
    return ‘ending’;
}

VAR hw=helloWorld();

调用执行,调用generator函数和调用普通函数的形式一样,没有区别,比如上面helloWorld()
但是内部的执行与普通函数是完全不同,调用generator函数之后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是遍历器对象。也就是说generator函数还是一个遍历器对象生成函数。返回的遍历器对象可以依次遍历generator函数内部的每一个状态。

它是怎么遍历的呢?。遍历器对象每次调用next方法,内部指针就从函数头部或者上一次停下来的的地方开始执行,遇到yield语句暂停并返回一个对象,下一次调用next,遇到下一个yield暂停并返回一个对象(对象拥有value,和done属性)。value的值就是yield语句的值,done属性表示遍历是否结束(false没有结束,true结束)。

上面示例代码用调用4次next:

第一次调用next,generator函数开始执行,遇到第一个yield暂停,并且返回一个对象,value =hello,done=false表示还遍历还没有结束。

第二次调用next,从上次暂停的位置开始执行,遇到下一个yield暂停,并返回一个对象。。

第三次调用next,返回value为return的值,done为true表示遍历结束。

第四次调用next,generator函数已经运行完毕,返回value为undefined,done为true。

yield和return

yield语句与return语句既有相似之处 ,也有区别。相似之处在于都可以返回紧跟在其后边的表达式的值。区别在于每次遇到yield,函数暂停,下一次在从该位置向后执行,而return语句没有此位置记忆功能,一个函数里面只能执行一次,而yield正因为可以有多个,可以返回多个值,所以generator函数可以返回一系列的值,这也就是它名称的来历(generator英语意思为生成器)

ITerator接口的关系

任意一个对象的iterator接口都是部署在了Symbol.iterator属性,由于generator函数就是遍历器生成函数,所以可以直接把它赋值给Symbol.iterator,从而使的该对象具有Iterator接口。

示例:

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

说明:代码中generator函数赋给了myIterable对象的Symbol.iterator属性,使的该对象具有iterator接口,可以 被()运算符遍历。为什么是这样?(…)三个点这里叫做扩展运算符,它的执行是调用了遍历器方法(它可以将一个数组转为用逗号分割的序列,可以用于函数调用传参),这里就是generator函数,然后返回一个遍历器对象,然后重复调用它的next方法。其实不只有扩展运算符,for..of循环的执行也是调用的iterator接口方法,也就是说只有部署了iterator接口的数据集合才可以使用for...of,扩展运算符遍历。

Generator.prototype.throw()

Generator函数返回的遍历器对象,都有一个throw方法,可以在函数体外抛出错误,然后在Generator函数体内捕获。

示例:

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.LOG('内部捕获', e);
  }
};

var i = g();
i.next();

try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b

上面代码遍历器对象连续抛出两个错误,第一个被generator函数体内的catch捕获。第二个由于generator函数体内的catch已经执行过了,所以被外面的catch捕获。如果generator函数体内没有try...catch...语句,那么就会被外面的catch语句捕获。如果都没有try...catch...,那么程序报错。

5.Generator.prototype.return()

yield*语句

如果在 Generator 函数内部,调用另一个 Generator 函数,默认情况下是没有效果的。yield*语句可以用来在一个 Generator 函数里面执行另一个 Generator 函数。

function* foo() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  for (let v of foo()) {
    yield v;
  }
  yield 'y';
}

for (let v of bar()){
  console.log(v);
}
// "x"
// "a"
// "b"
// "y"

从语法角度看,如果yield命令后面跟的是一个遍历器对象,需要在yield命令后面加上星号,表明它返回的是一个遍历器对象。这被称为yield*语句。

let delegatedIterator = (function* () {
  yield 'Hello!';
  yield 'Bye!';
}());

let delegatingIterator = (function* () {
  yield 'Greetings!';
  yield* delegatedIterator;
  yield 'Ok, bye.';
}());

for(let value of delegatingIterator) {
  console.log(value);
}
// "Greetings!
// "Hello!"
// "Bye!"
// "Ok, bye.”

yield*后面的Generator函数(没有return语句时),等同于在Generator函数内部,部署一个for...of循环。

function* concat(iter1, iter2) {
  yield* iter1;
  yield* iter2;
}

// 等同于

function* concat(iter1, iter2) {
  for (var value of iter1) {
    yield value;
  }
  for (var value of iter2) {
    yield value;
  }
}

上面代码,yield* 执行的是一个遍历器,for...of...循环的也是一个遍历器,所以for...of...返回yield value时等同于yield*

两个平常会用到的示例:

1)遍历嵌套的数组

function* iterTree(tree) {
  if (Array.isArray(tree)) {
    for(let i=0; i < tree.length; i++) {
      yield* iterTree(tree[i]);
    }
  } else {
    yield tree;
  }
}

const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];

for(let x of iterTree(tree)) {
  console.log(x);
}
// a
// b
// c
// d
// e

2)对于状态的控制:

var clock = function*() {
  while (true) {
    console.log('Tick!');
    yield;
    console.log('Tock!');
    yield;
  }
};

作为对象属性的generator

如果一个对象的属性是**Generator**函数,可以简写成下面的形式

let obj = {
  * myGeneratorMethod() {
    ···
  }
};

等同于

let obj = {
  myGeneratorMethod: function* () {
    // ···
  }
};

Generator函数的this

Generator函数总是返回一个遍历器,ES6规定这个遍历器是Generator函数的实例,也继承了Generator函数的PRototype对象上的方法。

function* g() {}

g.prototype.hello = function () {
  return 'hi!';
};

let obj = g();

obj instanceof g // true
obj.hello() // 'hi!'

上面代码表明,Generator函数g返回的遍历器obj,是g的实例,而且继承了g.prototype。但是,如果把g当作普通的构造函数,并不会生效,因为g返回的总是遍历器对象,而不是this对象。所以如果在generator函数内使用this,obj对象访问不到。

那么,有没有办法让Generator函数返回一个正常的对象实例,既可以用next方法,又可以获得正常的this

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var f = F.call(F.prototype);

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

f.a // 1
f.b // 2
f.c // 3

上面代码:首先使用call函数将F函数的this绑定到F.prototype;而f还是那个遍历器对象是F函数的实例,又可以继承F.prototype的属性,所以也就可以访问F.prototype代表的this的属性了。

Generator函数的应用

generator函数最大的作用可以用作异步任务的封装(由于它的yield命令特性,可以暂停和恢复执行)。而之前javascript对于异步的实现主要就是 回调函数,事件监听,promise等。

示例:

var fetch = require('node-fetch');

function* gen(){
  var url = 'https://api.github.COM/users/github';
  var result = yield fetch(url);
  console.log(result.bio);
}

上面代码中,Generator 函数封装了一个异步操作,该操作先读取一个远程接口,然后从 JSON 格式的数据解析信息。就像前面说过的,这段代码非常像同步操作,除了加上了yield命令。

var g = gen();
var result = g.next();

result.value.then(function(data){
  return data.json();
}).then(function(data){
  g.next(data);
});

上面代码中,首先执行 Generator 函数,获取遍历器对象,然后使用next方法(第二行),执行异步任务的第一阶段。由于Fetch模块返回的是一个 Promise 对象,而这个对象被yield返回到了它的value属性中,因此要用.value.then方法调用then方法。成功后 return数据参数data可以被第二个then方法中接受。而第二次调用then方法传入的data又传回了gen函数给了变量result。value往出传值,next可以往里传值。

脚本宝典总结

以上是脚本宝典为你收集整理的es6 generator函数全部内容,希望文章能够帮你解决es6 generator函数所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。