es6学习笔记6--Generator 函数

编程之家收集整理的这篇文章主要介绍了es6学习笔记6--Generator 函数编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基本概念

Generator函数有多种理解角度。从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态。

执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator函数内部的每一个状态。

形式上,Generator函数是一个普通函数,但是有两个特征。

  • function关键字与函数名之间有一个星号;
  • 函数体内部使用yield语句,定义不同的内部状态(yield语句在英语里的意思就是“产出”)。
function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

上面代码定义了一个Generator函数helloWorldGenerator,它内部有两个yield语句“hello”和“world”,即该函数有三个状态:hello,world和return语句(结束执行)。

然后,Generator函数调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是上一章介绍的遍历器对象(Iterator Object)。

下一步,必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield语句(或return语句)为止。换言之,Generator函数是分段执行的,yield语句是暂停执行的标记,而next方法可以恢复执行。

hw.next()
// { value: 'hello',done: false }

hw.next()
 { value: 'world',1)"> { value: 'ending',done: true }
 { value: undefined,done: true }

上面代码一共调用了四次next方法

第一次调用Generator函数开始执行,直到遇到第一个yield语句为止。next方法返回一个对象,它的value属性就是当前yield语句的值hello,done属性的值false,表示遍历还没有结束。

第二次调用,Generator函数从上次yield语句停下的地方,一直执行到下一个yield语句。next方法返回的对象的value属性就是当前yield语句的值world,done属性的值false,表示遍历还没有结束。

第三次调用,Generator函数从上次yield语句停下的地方,一直执行到return语句(如果没有return语句,就执行到函数结束)。next方法返回的对象的value属性,就是紧跟在return语句后面的表达式的值(如果没有return语句,则value属性的值为undefined),done属性的值true,表示遍历已经结束。

第四次调用,此时Generator函数已经运行完毕,next方法返回对象的value属性为undefined,done属性为true。以后再调用next方法,返回的都是这个值。

总结一下,调用Generator函数,返回一个遍历器对象,代表Generator函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着valuedone两个属性的对象。value属性表示当前的内部状态的值,是yield语句后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。

ES6没有规定,function关键字与函数名之间的星号,写在哪个位置。这导致下面的写法都能通过。

function * foo(x,y) { ··· }

foo(x,1)">function*foo(x,y) { ··· }

由于Generator函数仍然是普通函数,所以一般的写法是上面的第三种,即星号紧跟在function关键字后面。本书也采用这种写法。

yield语句

由于Generator函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数yield语句就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

(1)遇到yield语句,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。

(2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield语句。

(3)如果没有再遇到新的yield语句,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。

(4)如果该函数没有return语句,则返回的对象的value属性值为undefined

需要注意的是,yield语句后面的表达式,只有当调用next方法、内部指针指向该语句时才会执行,因此等于为JavaScript提供了手动的“惰性求值”(Lazy Evaluation)的语法功能

 gen() {
  yield  123 + 456;
}

上面代码中,yield后面的表达式123 + 456,不会立即求值,只会在next方法将指针移到这一句时,才会求值。

Generator函数可以不用yield语句,这时就变成了一个单纯的暂缓执行函数

 f() {
  console.log('执行了!')
}

var generator = f();

setTimeout(function () {
  generator.next()
},2000);

上面代码中,函数f如果是普通函数,在为变量generator赋值时就会执行。但是,函数f是一个Generator函数,就变成只有调用next方法时,函数f才会执行。

另外需要注意,yield语句不能用在普通函数中,否则会报错。

( (){
  yield 1;
})()
 SyntaxError: Unexpected number

上面代码在一个普通函数中使用yield语句,结果产生一个句法错误

yield语句如果用在一个表达式之中,必须放在圆括号里面。

console.log('Hello' + yield);  SyntaxError
console.log('Hello' + yield 123);  SyntaxError

console.log('Hello' + (yield));  OK
console.log('Hello' + (yield 123));  OK

yield语句用作函数参数或赋值表达式的右边,可以不加括号。

foo(yield 'a',yield 'b');  OK
let input = yield;  OK

与Iterator接口的关系

上一章说过,任意一个对象的Symbol.iterator方法,等于该对象的遍历器生成函数调用函数会返回该对象的一个遍历器对象。

由于Generator函数就是遍历器生成函数,因此可以把Generator赋值给对象的Symbol.iterator属性,从而使得该对象具有Iterator接口。

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

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

上面代码中,Generator函数赋值给Symbol.iterator属性,从而使得myIterable对象具有了Iterator接口,可以被...运算符遍历了。

Generator函数执行后,返回一个遍历器对象。该对象本身也具有Symbol.iterator属性,执行后返回自身。

next方法的参数

yield句本身没有返回值,或者说总是返回undefinednext方法可以带一个参数,该参数就会被当作上一个yield语句的返回值。

 f() {
  for(var i=0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}

var g = f();

g.next()  { value: 0,done: false }
g.next()  { value: 1,done: false }
g.next(true) 上面代码先定义了一个可以无限运行的Generator函数f,如果next方法没有参数,每次运行到yield语句,变量reset的值总是undefined。当next方法带一个参数true时,当前的变量reset就被重置为这个参数(即true),因此i会等于-1,下一轮循环就会从-1开始递增。

这个功能有很重要的语法意义。Generator函数从暂停状态到恢复运行,它的上下文状态(context)是不变的。通过next方法的参数,就有办法在Generator函数开始运行之后,继续向函数体内部注入值。也就是说,可以在Generator函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。

再看一个例子。

 foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next()  Object{value:6,done:false}
a.next()  Object{value:NaN,done:true}

var b = foo(5);
b.next()  { value:6,done:false }
b.next(12)  { value:8,done:false }
b.next(13)  { value:42,done:true }

上面代码中,第二次运行next方法的时候不带参数,导致y的值等于2 * undefined(即NaN),除以3以后还是NaN,因此返回对象的value属性也等于NaN。第三次运行Next方法的时候不带参数,所以z等于undefined,返回对象的value属性等于5 + NaN + undefined,即NaN

如果向next方法提供参数,返回结果就完全不一样了。上面代码第一次调用bnext方法时,返回x+1的值6;第二次调用next方法,将上一次yield语句的值设为12,因此y等于24,返回y / 3的值8;第三次调用next方法,将上一次yield语句的值设为13,因此z等于13,这时x等于5,y等于24,所以return语句的值等于42。

注意,由于next方法的参数表示上一个yield语句的返回值,所以第一次使用next方法时,不能带有参数。V8引擎直接忽略第一次使用next方法时的参数,只有从第二次使用next方法开始,参数才是有效的。从语义上讲,第一个next方法用来启动遍历器对象,所以不用带有参数。

如果想要第一次调用next方法时,就能够输入值,可以在Generator函数外面再包一层。

 wrapper(generatorFunction) {
  return  (...args) {
    let generatorObject = generatorFunction(...args);
    generatorObject.next();
    return generatorObject;
  };
}

const wrapped = wrapper( () {
  console.log(`First input: ${yield}`);
  return 'DONE';
});

wrapped().next('hello!')
 First input: hello!

上面代码中,Generator函数如果不用wrapper先包一层,是无法第一次调用next方法,就输入参数的。

for...of循环

for...of循环可以自动遍历Generator函数,且此时不再需要调用next方法

foo() {
  yield 1;
  yield 4;
  yield 5return 6for (let v of foo()) {
  console.log(v);
}
 1 2 3 4 5

上面代码使用for...of循环,依次显示5个yield语句的值。这里需要注意,一旦next方法的返回对象的done属性truefor...of循环就会中止,且不包含该返回对象,所以上面代码return语句返回的6,不包括for...of循环之中。

利用for...of循环,可以写出遍历任意对象的方法。原生的JavaScript对象没有遍历接口,无法使用for...of循环,通过Generator函数为它加上这个接口,就可以用了。

 objectEntries(obj) {
  let propKeys = Reflect.ownKeys(obj);

   (let propKey of propKeys) {
    yield [propKey,obj[propKey]];
  }
}

let jane = { first: 'Jane',last: 'Doe' };

 (let [key,value] of objectEntries(jane)) {
  console.log(`${key}: ${value}`);
}
 first: Jane
// last: Doe

上面代码中,对象jane原生不具备Iterator接口,无法用for...of遍历。这时,我们通过Generator函数objectEntries为它加上遍历器接口,就可以用for...of遍历了。加上遍历器接口的另一种写法是,将Generator函数加到对象的Symbol.iterator属性上面。

 objectEntries() {
  let propKeys = Object.keys(this);

  [propKey]];
  }
}

let jane = { first: 'Jane',1)"> };

jane[Symbol.iterator] = objectEntries;

 last: Doe

Generator.prototype.throw()

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

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

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

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

上面代码中,遍历器对象i连续抛出两个错误。第一个错误被Generator函数体内的catch语句捕获。i第二次抛出错误,由于Generator函数内部的catch语句已经执行过了,不会再捕捉到这个错误了,所以这个错误就被抛出了Generator函数体,被函数体外的catch语句捕获。

如果Generator函数内部没有部署try...catch代码块,那么throw方法抛出的错误,将被外部try...catch代码块捕获。

while (true) {
    yield;
    console.log('内部捕获' 外部捕获 a

上面代码中,遍历器函数g内部没有部署try...catch代码块,所以抛出的错误直接被外部catch代码块捕获。

如果Generator函数内部部署了try...catch代码块,那么遍历器的throw方法抛出的错误,不影响下一次遍历,否则遍历直接终止。

var gen =  gen(){
   {
    yield console.log('hello');
  }  (e) {
     ...
  }
  yield console.log('world');
}

 gen();
g.next();
g.throw();
g.next();
 hello world

上面代码在两次next方法之间,使用throw方法抛出了一个错误。由于这个错误在Generator函数内部被捕获了,所以不影响第二次next方法的执行。

 gen(){
  yield console.log('hello');
  yield console.log('world' gen();
g.next();

 {
  throw new Error();
}  (e) {
  g.next();
}
 world

上面代码中,throw命令抛出的错误不会影响到遍历器的状态,所以两次执行next方法,都取到了正确的操作。


如果Generator函数内部有try...finally代码块,那么return方法会推迟到finally代码块执行完再执行。

 numbers () {
  yield 1 {
    yield 2;
    yield 3;
  } finally {
    yield 4;
    yield 5;
  }
  yield 6;
}
 numbers()
g.next()  { done: false,value: 1 }
g.next() return(7) 
g.next()  { done: true,value: 7 }

上面代码中,调用return方法后,就开始执行finally代码块,然后等到finally代码块执行完,再执行return方法




总结

以上是编程之家为你收集整理的es6学习笔记6--Generator 函数全部内容,希望文章能够帮你解决es6学习笔记6--Generator 函数所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的ES6相关文章

ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一、安装命令行转码工具 npm install --glob
Map介绍 ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map也实现了iterator接口,所以可以使用【扩展
Object.fromEntries //二维数组 const result = Object.fromEntries([ ['name','Study
扩展运算符 [...]扩展运算符能将【数组】转换为逗号分隔的【参数序列】 //声明一个数组 const tfboys = ['y','w&#39
简化对象写法 ES6允许再大括号里面,直接写入变量和函数,作为对象的属性和方法。 遮眼法的书写更加简洁 let name = 'study'; let change =
函数参数默认值 ES6允许给函数参数赋值初始值 //1.形参初始值 具有默认值的参数,一般位置要靠后(潜规则) function add(a,b,c=10){ return aʻʼ } let
数值扩展 //0. Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
ES6引入rest参数,用于获取函数的实参,用来替代arguments //ES5获取实参的方式 function date(){ console.log(arguments);//对象 } date
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注