ES6 入门教程 19 Generator 函数的语法 19.1 简介

news2024/12/24 8:56:10

ES6 入门教程

ECMAScript 6 入门

作者：阮一峰

本文仅用于学习记录，不存在任何商业用途，如侵删

文章目录

      • ES6 入门教程
      • 19 Generator 函数的语法
        • 19.1 简介
          • 19.1.1 基本概念
          • 19.1.2 yield 表达式
          • 19.1.3 与 Iterator 接口的关系

19 Generator 函数的语法

19.1 简介

19.1.1 基本概念

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

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', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

在这里插入图片描述

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

  1. 第一次调用，Generator 函数开始执行，直到遇到第一个yield表达式为止。next方法返回一个对象，它的value属性就是当前yield表达式的值hello，done属性的值false，表示遍历还没有结束。
  2. 第二次调用，Generator 函数从上次yield表达式停下的地方，一直执行到下一个yield表达式。next方法返回的对象的value属性就是当前yield表达式的值world，done属性的值false，表示遍历还没有结束。
  3. 第三次调用，Generator 函数从上次yield表达式停下的地方，一直执行到return语句（如果没有return语句，就执行到函数结束）。next方法返回的对象的value属性，就是紧跟在return语句后面的表达式的值（如果没有return语句，则value属性的值为undefined），done属性的值true，表示遍历已经结束。
  4. 第四次调用，此时 Generator 函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。

【总结】

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

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

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

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

19.1.2 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）的语法功能。

function* gen() {
  yield  123 + 456;
}

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

yield表达式与return语句既有相似之处，也有区别。

  • 相似之处在于，都能返回紧跟在语句后面的那个表达式的值。
  • 区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield表达式。正常函数只能返回一个值，因为只能执行一次return；Generator 函数可以返回一系列的值，因为可以有任意多个yield。从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是它的名称的来历（英语中，generator 这个词是“生成器”的意思）。

Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。

function* f() {
  console.log('执行了！')
}

var generator = f();

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

在这里插入图片描述

过了2秒输出语句

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

另外需要注意，yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。

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

上面代码在一个普通函数中使用yield表达式，结果产生一个句法错误。

下面是另外一个例子。

var arr = [1, [[2, 3], 4], [5, 6]];

var flat = function* (a) {
  a.forEach(function (item) {
    if (typeof item !== 'number') {
      yield* flat(item);
    } else {
      yield item;
    }
  });
};

for (var f of flat(arr)){
  console.log(f);
}

上面代码也会产生句法错误，因为forEach方法的参数是一个普通函数，但是在里面使用了yield表达式（这个函数里面还使用了yield*表达式）。一种修改方法是改用for循环。

var arr = [1, [[2, 3], 4], [5, 6]];

var flat = function* (a) {
  var length = a.length;
  for (var i = 0; i < length; i++) {
    var item = a[i];
    if (typeof item !== 'number') {
      yield* flat(item);
    } else {
      yield item;
    }
  }
};

for (var f of flat(arr)) {
  console.log(f);
}
// 1, 2, 3, 4, 5, 6

在这里插入图片描述

另外，yield表达式如果用在另一个表达式之中，必须放在圆括号里面。

function* demo() {
  console.log('Hello' + yield); // SyntaxError
  console.log('Hello' + yield 123); // SyntaxError

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

yield表达式用作函数参数或放在赋值表达式的右边，可以不加括号。

function* demo() {
  foo(yield 'a', yield 'b'); // OK
  let input = yield; // OK
}
19.1.3 与 Iterator 接口的关系

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

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

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

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

在这里插入图片描述

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

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

function* gen(){
  // some code
}

var g = gen();

g[Symbol.iterator]() === g
// true

上面代码中，gen是一个 Generator 函数，调用它会生成一个遍历器对象g。它的Symbol.iterator属性，也是一个遍历器对象生成函数，执行后返回它自己。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/22171.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Espressif-IDE ESP32 LED Flash 闪烁工程的创建

Espressif-IDE ESP32 LED Flash 闪烁工程的创建

前言 Espressif-IDE 类似于 eclipse 开发环境&#xff0c;更新 ESP32的开发环境后&#xff0c;发现可以直接使用 Espressif-IDE 进行ESP32 的工程代码开发、程序下载&#xff0c;非常的方便 本篇开始把 ESP32的开发板的LED 点亮&#xff0c;熟悉下 Espressif-IDE 的开发流程 …
阅读更多...
MySQL表的高级增删改查

MySQL表的高级增删改查

文章目录一、聚合查询二、分组查询三、联合查询内连接外连接自连接四、合并查询五、子查询一、聚合查询 聚合查询是针对行与行之间的计算&#xff0c;常见的聚合函数有: 函数作用COUNT(expr)查询数据的数量SUM(expr)查询数据的总和AVG(expr)查询数据的平均值MAX(expr)查询数据…
阅读更多...
ES6 入门教程 18 Iterator 和 for...of 循环 18.1 Iterator（遍历器）的概念

ES6 入门教程 18 Iterator 和 for...of 循环 18.1 Iterator（遍历器）的概念

ES6 入门教程 ECMAScript 6 入门 作者&#xff1a;阮一峰 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删 文章目录ES6 入门教程18 Iterator 和 for...of 循环18.1 Iterator&#xff08;遍历器&#xff09;的概念18 Iterator 和 for…of 循环 18.1 Iter…
阅读更多...
zk中watcher机制（重补早期学习记录）

zk中watcher机制（重补早期学习记录）

前言：补学习记录，几年前写一半丢草稿箱，突然看到，有强迫症所以补完 一、理解watcher机制 二、父节点watcher事件 连接zk客户端 ./zkCli.sh 使用help查看命令 父节点使用，stat或者get创建自己的watch事件 stat 路径 watch get 路径 watch 我们给一个不存在的节点设置一个w…
阅读更多...
这次把怎么做好一个PPT讲清-动画篇

这次把怎么做好一个PPT讲清-动画篇

干货预警&#xff01; 作为一位PPT发烧友看过诸多PPT案例&#xff0c;分享几个高大上的动画效果。文末有福利&#xff01; 废话不多说&#xff0c;直接上重点&#xff0c;本文主要讲八个动画技巧&#xff0c;我们来看先目录&#xff1a; 收藏是点赞的六倍&#xff0c;各位看官…
阅读更多...
统计学习、机器学习以及python的学习顺序是什么

统计学习、机器学习以及python的学习顺序是什么

前言 我是非科班出身成功转行算法的&#xff0c;我来说下我的学习路线是怎样的。&#xff08;文末送读者福利&#xff09; 1、看书学原理&#xff1a;我因为没买周志华老师的西瓜书&#xff0c;只看过李航老师的小蓝书&#xff0c;我第一遍看统计学习 方法的时候非常痛苦全是…
阅读更多...
Monaco Editor教程（十七）：代码信息指示器CodeLens配置详解

Monaco Editor教程（十七）：代码信息指示器CodeLens配置详解

背景 有时候我们在使用VS Code编辑一个文件时 会看到这样的效果 在上述的图片中&#xff0c;1720行和1721行之间&#xff0c;有一行不属于该文件本身内容的注释。这一效果能够方便开发者快速地理解代码&#xff0c;看到代码的提交人&#xff0c;时间&#xff0c;可能还会有备…
阅读更多...
C语言：一维数组的创建、初始化

C语言：一维数组的创建、初始化

一、一维数组的创建 数组的定义&#xff1a;在C语言中有各种数据类型&#xff0c;而每一种数据类型都有相对应的数据元素&#xff0c;这些元素可以组成一个团体&#xff0c;一个集合&#xff0c;从而有了数组概念。 数组也有三要素&#xff1a;数组元素类型&#xff0c; …
阅读更多...
双链笔记Logseq的安装指南

双链笔记Logseq的安装指南

便民服务还是挺方便的&#xff0c;不用出小区就可以做了 本文完成于 10 月初&#xff0c;撰写时 Logseq 的版本为 v0.8.8&#xff0c;发布时的最新版本是 v0.8.11 什么是 Logseq &#xff1f; Logseq 是一个本地优先的非线性大纲笔记本&#xff0c;用于组织和共享您的个人知识库…
阅读更多...
Win11电脑如何设置自动开机(Windows 11 2022H2)

Win11电脑如何设置自动开机(Windows 11 2022H2)

Win11电脑如何设置自动开机 ​ 文章目录1、最先右键选择“此电脑”&#xff0c;点一下“管理”。2、随后寻找系统工具里的“任务方案程序”。3、再点一下右边的“创建基本任务”。4、名字中输入“自动开机”。5、随后选择自动开机的次数。6、然后设置我们应该自动开机的实际时间…
阅读更多...
并发编程之Executor线程池原理与源码解读

并发编程之Executor线程池原理与源码解读

线程 线程是调度CPU资源的最小单位&#xff0c;线程模型分为KLT模型与ULT模型&#xff0c;JVM使用的KLT模 型&#xff0c;Java线程与OS线程保持1:1的映射关系&#xff0c;也就是说有一个java线程也会在操作系统里有一个对应的线程。Java线程有多种生命状态 NEW,新建 RUNNABLE,运…
阅读更多...
分布式架构演进过程

分布式架构演进过程

分布式的前提&#xff0c;我们得有多台服务器&#xff0c;那么我们需要知道世界上第一台计算机的由来&#xff0c;而第一台计算机的参考模型就是冯诺依曼模型&#xff0c;为此奠定了所有的分布式都在围绕着这个模型里面的某一块或者相互之间模块进行打交道。 搞分布式又有什么意…
阅读更多...
【计算机毕业设计】7.健身俱乐部会籍管理系统+vue

【计算机毕业设计】7.健身俱乐部会籍管理系统+vue

一、系统截图&#xff08;需要演示视频可以私聊&#xff09; 摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的…
阅读更多...
关于clickhouse单节点部署

关于clickhouse单节点部署

因为公司网络问题&#xff0c;下载clickhouse无法使用命令下载&#xff0c;所以用压缩包进行下载安装。 首先在其官网下载下载安装包 https://packages.clickhouse.com/tgz/stable/ 一共要下载四个包 clickhouse-client clickhouse-common-static clickhouse-common-static-d…
阅读更多...
miRNA 在基因调控中的作用

miRNA 在基因调控中的作用

MicroRNA (miRNA) 是什么&#xff1f;“micro”“mi”是微小的意思&#xff0c;顾名思义&#xff0c;miRNA 就是小的非编码 RNA&#xff0c;长度约 23 个核苷酸 (nt)&#xff0c;它在转录后的基因调控中发挥关键作用&#xff0c;包括疾病的发生、细胞分化与组织发育&#xff0c…
阅读更多...
山东大学线性代数-1-矩阵-2

山东大学线性代数-1-矩阵-2

目录 1.9 初等矩阵 1.9.1 初等矩阵的定义 1.9.2 初等矩阵的性质 1.9.3 初等矩阵与初等变换的关系 1.9.4 满秩矩阵的四种等价表述 1.10 逆矩阵的定义及可逆条件 1.10.1 逆矩阵的定义 1.10.2 矩阵可逆的条件 1.10.3 二阶可逆矩阵的逆矩阵求法 1.11 逆矩阵的求法&#x…
阅读更多...
Apollo 应用与源码分析：Apollo工程概述与AUTOSAR架构

Apollo 应用与源码分析：Apollo工程概述与AUTOSAR架构

目录 Apollo 工程概述 目录结构 软件架构 硬件架构 AUTOSAR架构 Apollo 概述 目录结构 |-cyber 消息中间件&#xff0c;替换ros作为消息层 |-docker 容器相关 |-docs 文档相关 |-modules 自动驾驶模块&#xff0c;主要的定位&#xff0c;预测&#xff0c;感知&#xf…
阅读更多...
【Java进阶篇】第四章 异常处理

【Java进阶篇】第四章 异常处理

文章目录1、异常2、类Throwable3、运行时异常和编译时异常4、异常的处理5、异常导致某些代码不能被执行6、try...catch总结7、异常对象的常用方法8、try...catch和finally9、final、finally和finalize的整理区分10、如何自定义异常11、异常在实际开发中的作用12、异常与方法覆盖…
阅读更多...
带联网功能的RFID宿舍门禁(六)-两年后的再次总结

带联网功能的RFID宿舍门禁(六)-两年后的再次总结

文章首发及后续更新&#xff1a;https://mwhls.top/4066.html&#xff0c;无图/无目录/格式错误/更多相关请至首发页查看。 新的更新内容请到mwhls.top查看。 欢迎提出任何疑问及批评&#xff0c;非常感谢&#xff01; 带联网功能的RFID宿舍门禁 两年后又来了次总结&#xff0c…
阅读更多...
聚观早报|中国制造成世界杯交通主力；特斯拉拟召回32万辆车

聚观早报|中国制造成世界杯交通主力；特斯拉拟召回32万辆车

今日要闻&#xff1a;中国制造成世界杯交通主力&#xff1b;特斯拉拟召回32万辆车&#xff1b;iPhone14pro发货或延期至2023年&#xff1b;Tik Tok逆势宣布招聘&#xff1b;世界杯部署2.2万电子眼中国制造成世界杯交通主力 据消息&#xff0c;来自中国的新能源客车成了服务本届…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023