关键词搜索

全站搜索
×
密码登录在这里
×
注册会员
×

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

ES6 Generator函数详解

发布2022-06-20 浏览634次

详情内容

ES6新增了Generator函数,可以通过 yield 关键字,把函数的执行流挂起,从而可以改变执行流程,或者可以暂停或者延迟执行,这也就为异步编程提供解决方案。

下面 基本用法将在本文当中讲解。

一、Generator 函数组成

Generator 有两个方面和普通函数不一样:

  • function 后面,函数名之前有个 * ;

  • 函数的内部有 yield 表达式。

其中 * 用来表示 Generator 函数,yield 用来定义函数内部的状态。

function* call() {
  console.log("first");
  yield "1";
  console.log("second");
  yield "2";
  console.log("third");
  return "3";}


二、Generator 函数执行机制

使用 Generator 函数,和一般函数一样,是在函数名后面加上 (),但是 Generator 函数不会像普通函数那样马上执行,而是会返回一个指针,这个指针指向对象的内部状态,所以要调用遍历器对象 Iterator 的 next 方法,指针就会从函数头部或者上一次停下来的地方开始执行。

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


详细解释如下说明:

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

  • 第二次调用 next 方法时,和第一次一样。

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

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

创建名称为 es6gen4.js 的文件,并且输入下面的代码。

function* call() {
  console.log("first");
  yield "1";
  console.log("second");
  yield "2";
  console.log("third");
  return "3";}var f = call();f.next();f.next();f.next();f.next();


在终端输入 node es6gen4.js 运行,结果如下所示:
请添加图片描述

三、函数返回的遍历器对象的方法

next 方法

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

function* make2Parameter() {
  console.log("开始");
  var x = yield "2";
  console.log("第一个:" + x);
  var y = yield "3";
  console.log("第二个:" + y);
  console.log("全部是:" + (x + y));}


next 不传参的情况如下:

var cost = make2Parameter();cost.next();// 开始// {value: "2", done: false}cost.next();// 第一个:undefined// {value: "3", done: false}cost.next();// 第二个:undefined// 全部是:NaN// {value: undefined, done: true}


next 传参情况:

var cost2 = make2Parameter();cost2.next(10);// 开始// {value: "2", done: false}cost2.next(20);// 第一个:20// {value: "3", done: false}cost2.next(30);//第二个:30// 全部:50// {value: undefined, done: true}


创建 名称为 es6gen5.js 的文件,并且输入下面的代码。

function* make2Parameter() {
  console.log("开始");
  var x = yield "2";
  console.log("第一个:" + x);
  var y = yield "3";
  console.log("第二个:" + y);
  console.log("全部是:" + (x + y));}var cost = make2Parameter();cost.next();// 开始// {value: "2", done: false}cost.next();// 第一个:undefined// {value: "3", done: false}cost.next();// 第二个:undefined// 全部是:NaN// {value: undefined, done: true}var cost2 = make2Parameter();cost2.next(10);// 开始// {value: "2", done: false}cost2.next(20);// 第一个:20// {value: "3", done: false}cost2.next(30);//第二个:30// 全部:50// {value: undefined, done: true}


运行结果如下:
请添加图片描述
除了使用 next,还可以使用 for… of 循环遍历 Generator 函数生产的 Iterator 对象。

return 方法

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

function* call() {yield 1;yield 2;yield 3;}var f = call();f.next();// {value: 1, done: false}f.return("foo");// {value: "foo", done: true}f.next();// {value: undefined, done: true}throw 方法throw 方法可以再 Generator 函数体外面抛出异常,再函数体内部捕获。


另外一个例子:

var d = function* () {
  try {yield;
  } catch (e) {console.log("捕获里面的错误", e);
  }};var i = d();i.next();try {
  i.throw("a");
  i.throw("b");} catch (e) {
  console.log("捕获外面的错误", e);


创建名称为 es6gen6.js 的文件,并且输入下面的代码。

var d = function* () {
  try {yield;
  } catch (e) {console.log("捕获里面的错误", e);
  }};var i = d();i.next();try {
  i.throw("a");
  i.throw("b");} catch (e) {
  console.log("捕获外面的错误", e);}


运行结果如下:
请添加图片描述
遍历器对象抛出了两个错误,第一个被 Generator 函数内部捕获,第二个因为函数体内部的 catch 函数已经执行过了,不会再捕获这个错误,所以这个错误就抛出 Generator 函数体,被函数体外的 catch 捕获。

yield* 表达式

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

function* callA() {
  console.log("callA: " + (yield));}function* callerB() {
  while (true) {yield* callA();
  }}const callerObj = callerB();callerObj.next();callerObj.next("first");callerObj.next("second");


创建名称为 es6gen7.js 的文件,并且输入下面的代码。

function* callA() {
  console.log("callA: " + (yield));}function* callerB() {
  while (true) {yield* callA();
  }}const callerObj = callerB();callerObj.next();callerObj.next("first");callerObj.next("second");


运行效果如下:
请添加图片描述
上面的案例代码可以用下面的代码代替(效果相同):

// 等同于function* callerB() {
  while (true) {for (var value of callA) {  yield value;}
  }}


四、使用场景

实现 Iterator

为不具备 Iterator 接口的对象提供遍历方法。

function* objEnter(obj) {
  const propKeys = Reflect.ownKeys(obj);
  for (const propKey of propKeys) {yield [propKey, obj[propKey]];
  }}const jane = { first: "小A", last: "大D" };for (const [key, value] of objEnter(jane)) {
  console.log(`${key}: ${value}`);}// first: 小A// last: 大D


完整案例如下:

创建 名称为 es6gen8.js 的文件。输入下列代码:

function* objEnter(obj) {
  const propKeys = Reflect.ownKeys(obj);
  for (const propKey of propKeys) {yield [propKey, obj[propKey]];
  }}const jane = { first: "小A", last: "大D" };for (const [key, value] of objEnter(jane)) {
  console.log(`${key}: ${value}`);}// first: 小A// last: 大D


运行效果:
请添加图片描述

Reflect.ownKeys() 返回对象所有的属性,不管属性是否可枚举,包括 Symbol。 javascript 原生是不具备 Iterator 接口无法通过 for… of 遍历。这边用了 Generator 函数加上了 Iterator 接口,所以就可以遍历 jane 对象了。

总结

本文介绍了 ES6 Generator 函数的概念和使用。以通过 yield 关键字,把函数的执行流挂起,为改变执行流程提供了可能,从而为异步编程提供解决方案。

点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
确定支付下载