ES6深入—ES6 Generator 函数

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量1.4k 收藏 7
点赞数 7
分类专栏： ES6深入 文章标签： javascript 前端 开发语言 ecmascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44009656/article/details/125039322
版权

文章目录

前言

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 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。

小丫么小牛马
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Es6 Generator函数详细解析
08-27
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。这篇文章给大家介绍Es6 Generator函数的相关知识，感兴趣的朋友一起看看吧
ES6中Generator函数
m0_62785037的博客
05-20 632
全网ES6中Generator函数详细说明
es6中的generator函数详解
田兴的博客
04-12 5291
generator函数 1.generator是什么: generator是一个迭代生成器,其返回值为迭代器(lterator),是ES6标准引入的新的数据类型，它借鉴于Python中的generator概念和语法； 迭代器协议： 定义了一种标准的方式来产生一个有限或无限序列的值； 当一个对象被认为是一个迭代器时，它实现了一个 next() 的方法，next()返回值如下： { done:tr...
es6的generator
口袋的天空的博客
03-16 610
generator函数是es6引入的，主要用于异步编程generator最大特点是交出函数的执行权（即暂停执行，通过yield实现该功能）
ES6 Generator函数
不怕麻烦的鹿丸的博客
12-14 1234
以后，每次调用遍历器对象的 next 方法，就会返回一个有着 value 和 done 两个属性的对象。这里需要注意，一旦 next 方法的返回对象的 done 属性为 true ， for...of 循环就会中止，且不包含该返回对象，所以上面代码的 return 语句返回的 6 ，不包括在 for...of 循环之中。（3）如果没有再遇到新的 yield 表达式，就一直运行到函数结束，直到 return 语句为止，并将 return 语句后面的表达式的值，作为返回的对象的 value 属性值。
ES6篇（16）--Generator函数
u012149906的博客
08-02 159
阮一峰 ES6 Generator函数 Generator函数是ES6提供的异步编程解决方法，语法行为与传统函数不同。 （1）Generator函数的基本概念 ①Generator函数是一个状态机，封装了很多内部状态 ②Generator函数是一个遍历器对象的生成函数，返回遍历器对象，可依次遍历Generator函数内部的每一个状态 ③从形式上看Generator函数是一个普通函数，有两个特征：...
Generator函数
热门推荐
qq_43239667的博客
04-06 1万+
1、什么是 Generator 函数 在Javascript中，一个函数一旦开始执行，就会运行到最后或遇到return时结束，运行期间不会有其它代码能够打断它，也不能从外部再传入值到函数体内 而Generator函数（生成器）的出现使得打破函数的完整运行成为了可能，其语法行为与传统函数完全不同 Generator函数是ES6提供的一种异步编程解决方案，形式上也是一个普通函数，但有几个显著的特征： function关键字与函数名之间有一个星号 “*” （推荐紧挨着function关键字） 函数体内使用 yi
ES6：Generator函数详解
DZQ1223的博客
07-29 859
从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是其名称的来历(在英语中generator”这个词是“生成器”的意思)。上面的代码中，函数 f 如果是普通函数，在为变量 generator 赋值时就会执行。方法时，内部的指针就会从函数的头部或上一次停下来的地方开始执行，直到遇到下一个。方法等于该对象的遍历器对象生成函数，调用该函数会返回该对象的一个遍历器对象。函数运行的不同阶段从外部向内部注入不同的值，从而调整函数行为。上面的代码已经把回调函数改成了直线执行的形式，但是加入了大量。
ES6之Generator 函数
low666的博客
03-25 419
15 Generator 函数 15.1 简介 15.1.1 基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API ，它的异步编程应用请 看《异步操作》一章。 Generator 函数有多种理解角度。从语法上，首先可以把它理解成， Generator 函数是一个状态机，封装了多个内部状态。...
ES6异步方案——生成器Generators/yield
hqs2212586的专栏
04-28 348
一、Generator函数简介 　　generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。 　　ES6定义generator标准时借鉴了Python的generator的概念和语法。 1、理解Generator函数 　　Generator函数有多种理解角度。 function* gen() { yield 1; y...
Generator 函数
m0_46404694的博客
04-15 897
这里写目录标题基本概念 基本概念 执行 Generator 函数会返回一个遍历器对象，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。 Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”） function* helloWorldGenerator() { yiel
ES6 Generator函数的应用实例分析
10-16
主要介绍了ES6 Generator函数的应用,结合实例形式分析了ES6 Generator函数异步操作与异常捕获相关使用技巧,需要的朋友可以参考下
ES6新特性三： Generator(生成器)函数详解
08-30
主要介绍了ES6新特性之Generator(生成器)函数,简单分析了Generator(生成器)函数的功能、定义、调用方法并结合实例形式给出了相关使用技巧,需要的朋友可以参考下
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 627
步骤很详细，直接上教程……
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 20
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 852
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
[email protected]使用懒加载
weixin_44072254的博客
04-25 202
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 143
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1446
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
es6 generator
07-27
ES6 Generator 是 JavaScript 中的一个特殊类型的函数，它可以在函数执行过程中暂停和恢复。使用 `function*` 定义一个 Generator 函数，并使用 `yield` 关键字来指示函数的执行状态。 Generator 函数可以通过调用 `next()` 方法来逐步执行。每次调用 `next()` 方法，函数会执行到下一个 `yield` 关键字处，并返回一个包含当前状态信息的对象。这个对象包含两个属性：`value` 和 `done`。`value` 属性表示当前 `yield` 表达式的返回值，而 `done` 属性表示函数是否已经执行完毕。 以下是一个简单的示例，演示了如何使用 Generator 函数创建一个递增的计数器： ```javascript function* counter() { let count = 0; while (true) { yield count++; } } const generator = counter(); console.log(generator.next().value); // 输出: 0 console.log(generator.next().value); // 输出: 1 console.log(generator.next().value); // 输出: 2 // ... ``` 在上面的示例中，每次调用 `generator.next().value`，计数器都会递增，并返回当前的计数值。 Generator 函数是一种强大的工具，它可以用于实现异步编程、迭代器和解决复杂的控制流问题。你可以在编写 JavaScript 代码时使用 Generator 函数来提供更灵活和可读性更高的解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小丫么小牛马

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值