JS-史上最清新的Generator

·  阅读 171

日常使用,看懂1和2即可。

1、什么是Generator函数?

ES6 新引入了 Generator 函数,可以通过 yield 关键字,把函数的执行流挂起,为改变执行流程提供了可能,从而为异步编程提供解决方案。

特点: Generator 函数不会像普通函数一样立即执行,而是返回一个指向内部状态对象的指针,当调用 next 方法时,指针才会从函数头部或者上一次停下来的地方开始执行。

Generator 有两个区分于普通函数的部分:一是在 function 后面,函数名之前有个 * ;二是函数内部有 yield 表达式。

2、Genetator函数用法

调用 Generator 函数和调用普通函数一样,在函数名后面加上()即可,但是 Generator 函数不会像普通函数一样立即执行,而是返回一个指向内部状态对象的指针,所以要调用遍历器对象Iterator 的 next 方法,指针就会从函数头部或者上一次停下来的地方开始执行。.next()函数如果传参,会作为上一步yield的返回值;.return()方法可以结束遍历 Generator 函数。提供参数时,返回该参数;不提供参数时,返回 undefined 。

function* func(){
  console.log("one");
  yield '1';  
  console.log("two");  
  yield '2';   
  console.log("three");  
  return '3';
}


func().next(); 
// one // {value: "1", done: false}   
func().next(); // two // {value: "2", done: false}   
func().next(); // three // {value: "3", done: true}   
func().next(); // {value: undefined, done: true}

复制代码

第一次调用 next 方法时,从 Generator 函数的头部开始执行,先是打印了 one ,执行到 yield 就停下来,并将yield 后边表达式的值 '1',作为返回对象的 value 属性值,此时函数还没有执行完, 返回对象的 done 属性值是 false。

第二次调用 next 方法时,同上步 。

第三次调用 next 方法时,先是打印了 three ,然后执行了函数的返回操作,并将 return 后面的表达式的值,作为返回对象的 value 属性值,此时函数已经结束,多以 done 属性值为true 。

第四次调用 next 方法时, 此时函数已经执行完了,所以返回 value 属性值是 undefined ,done 属性值是 true 。如果执行第三步时,没有 return 语句的话,就直接返回 {value: undefined, done: true}。

3、next方法

一般情况下,next 方法不传入参数的时候,yield 表达式的返回值是 undefined 。当 next 传入参数的时候,该参数会作为上一步yield的返回值。

function* sendParameter(){
     console.log("start");     
     var x = yield '2';     
     console.log("one:" + x);     
     var y = yield '3';     
     console.log("two:" + y);     
     console.log("total:" + (x + y)); 
 }
 // next 不传参
 var sendp1 = sendParameter(); 
 sendp1.next(); 
 // start // {value: "2", done: false} 
 sendp1.next();
  // one:undefined // {value: "3", done: false} 
  sendp1.next(); 
  // two:undefined // total:NaN // {value: undefined, done: true} 
  // next传参 
  var sendp2 = sendParameter(); 
  sendp2.next(10); 
  // start
  // {value: "2", done: false} 
  sendp2.next(20); 
  // one:20 // {value: "3", done: false} 
  sendp2.next(30); 
  // two:30 // total:50 // {value: undefined, done: true}

复制代码

4、return 方法

return 方法返回给定值,并结束遍历 Generator 函数。 return 方法提供参数时,返回该参数;不提供参数时,返回 undefined 。

image (2).png 遍历器对象抛出了两个错误,第一个被 Generator 函数内部捕获,第二个因为函数体内部的catch 函数已经执行过了,不会再捕获这个错误,所以这个错误就抛出 Generator 函数体,被函数体外的 catch 捕获。

5、yield* 表达式

yield* 表达式表示 yield 返回一个遍历器对象,用于在 Generator 函数内部,调用另一个 Generator 函数。

image (3).png

分类:
前端
收藏成功!
已添加到「」, 点击更改