热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

详解JavaScriptES6中的Generator_基础知识

今天讨论的新特性让我非常兴奋,因为这个特性是ES6中最神奇的特性。这里的“神奇”意味着什么呢?对于初学者来说,该特性与以往的JS完全不同,甚至


今天讨论的新特性让我非常兴奋,因为这个特性是 ES6 中最神奇的特性。

这里的“神奇”意味着什么呢?对于初学者来说,该特性与以往的 JS 完全不同,甚至有些晦涩难懂。从某种意义上说,它完全改变了这门语言的通常行为,这不是“神奇”是什么呢。

不仅如此,该特性还可以简化程序代码,将复杂的“回调堆栈”改成直线执行的形式。

我是不是铺垫的太多了?下面开始深入介绍,你自己去判断吧。

简介

什么是 Generator?

看下面代码:


上面代码是模仿Talking cat(当下一个非常流行的应用)的一部分,点击这里试玩,如果你对代码感到困惑,那就回到这里来看下面的解释。

这看上去很像一个函数,这被称为 Generator 函数,它与我们常见的函数有很多共同点,但还可以看到下面两个差异:

通常的函数以 function 开始,但 Generator 函数以 function* 开始。

在 Generator 函数内部,yield 是一个关键字,和 return 有点像。不同点在于,所有函数(包括 Generator 函数)都只能返回一次,而在 Generator 函数中可以 yield 任意次。yield 表达式暂停了 Generator 函数的执行,然后可以从暂停的地方恢复执行。

常见的函数不能暂停执行,而 Generator 函数可以,这就是这两者最大的区别。

原理

调用 quips() 时发生了什么?


我们对普通函数的行为非常熟悉,函数被调用时就立即执行,直到函数返回或抛出一个异常,这是所有 JS 程序员的第二天性。

Generator 函数的调用方法与普通函数一样:quips("jorendorff"),但调用一个 Generator 函数时并没有立即执行,而是返回了一个 Generator 对象(上面代码中的 iter),这时函数就立即暂停在函数代码的第一行。

每次调用 Generator 对象的 .next() 方法时,函数就开始执行,直到遇到下一个 yield 表达式为止。

这就是为什么我们每次调用 iter.next() 时都会得到一个不同的字符串,这些都是在函数内部通过 yield 表达式产生的值。

当执行最后一个 iter.next() 时,就到达了 Generator 函数的末尾,所以返回结果的 .done属性值为 true,并且 .value 属性值为 undefined。

现在,回到 Talking cat 的 DEMO,尝试在代码中添加一些 yield 表达式,看看会发生什么。

从技术层面上讲,每当 Generator 函数执行遇到 yield 表达式时,函数的栈帧 — 本地变量,函数参数,临时值和当前执行的位置,就从堆栈移除,但是 Generator 对象保留了对该栈帧的引用,所以下次调用 .next() 方法时,就可以恢复并继续执行。

值得提醒的是 Generator 并不是多线程。在支持多线程的语言中,同一时间可以执行多段代码,并伴随着执行资源的竞争,执行结果的不确定性和较好的性能。而 Generator 函数并不是这样,当一个 Generator 函数执行时,它与其调用者都在同一线程中执行,每次执行顺序都是确定的,有序的,并且执行顺序不会发生改变。与线程不同,Generator 函数可以在内部的 yield 的标志点暂停执行。

通过介绍 Generator 函数的暂停、执行和恢复执行,我们知道了什么是 Generator 函数,那么现在抛出一个问题:Generator 函数到底有什么用呢?

迭代器

通过上篇文章,我们知道迭代器并不是 ES6 的一个内置的类,而只是作为语言的一个扩展点,你可以通过实现 [Symbol.iterator]() 和 .next() 方法来定义一个迭代器。

但是,实现一个接口还是需要写一些代码的,下面我们来看看在实际中如何实现一个迭代器,以实现一个 range 迭代器为例,该迭代器只是简单地从一个数累加到另一个数,有点像 C 语言中的 for (;;) 循环。

// This should "ding" three times
for (var value of range(0, 3)) {
alert("Ding! at floor #" + value);
}
// This should "ding" three times
for (var value of range(0, 3)) {
alert("Ding! at floor #" + value);
}

现在有一个解决方案,就是使用 ES6 的类。(如果你对 class 语法还不熟悉,不要紧,我会在将来的文章中介绍。)


查看该 DEMO。

这种实现方式与 Java 和 Swift 的实现方式类似,看上去还不错,但还不能说上面代码就完全正确,代码没有任何 Bug?这很难说。我们看不到任何传统的 for (;;) 循环代码:迭代器的协议迫使我们将循环拆散了。

在这一点上,你也许会对迭代器不那么热衷了,它们使用起来很方便,但是实现起来似乎很难。

我们可以引入一种新的实现方式,以使得实现迭代器更加容易。上面介绍的 Generator 可以用在这里吗?我们来试试:


查看该 DEMO。

上面这 4 行代码就可以完全替代之前的那个 23 行的实现,替换掉整个 RangeIterator 类,这是因为 Generator 天生就是迭代器,所有的 Generator 都原生实现了 .next() 和 [Symbol.iterator]() 方法。你只需要实现其中的循环逻辑就够了。

不使用 Generator 去实现一个迭代器就像被迫写一个很长很长的邮件一样,本来简单的表达出你的意思就可以了,RangeIterator 的实现是冗长和令人费解的,因为它没有使用循环语法去实现一个循环功能。使用 Generator 才是我们需要掌握的实现方式。

我们可以使用作为迭代器的 Generator 的哪些功能呢?

使任何对象可遍历 — 编写一个 Genetator 函数去遍历 this,每遍历到一个值就 yield 一下,然后将该 Generator 函数作为要遍历的对象上的 [Symbol.iterator] 方法的实现。

简化返回数组的函数 — 假如有一个每次调用时都返回一个数组的函数,比如:


使用 Generator 可以简化这类函数:


这两者唯一的区别在于,前者在调用时计算出了所有结果并用一个数组返回,后者返回的是一个迭代器,结果是在需要的时候才进行计算,然后一个一个地返回。

无穷大的结果集 — 我们不能构建一个无穷大的数组,但是我们可以返回一个生成无尽序列的 Generator,并且每个调用者都可以从中获取到任意多个需要的值。

重构复杂的循环 — 你是否想将一个复杂冗长的函数重构为两个简单的函数?Generator 是你重构工具箱中一把新的瑞士军刀。对于一个复杂的循环,我们可以将生成数据集那部分代码重构为一个 Generator 函数,然后用 for-of 遍历:for (var data of myNewGenerator(args))。

构建迭代器的工具 — ES6 并没有提供一个可扩展的库,来对数据集进行 filter 和 map等操作,但 Generator 可以用几行代码就实现这类功能。

例如,假设你需要在 Nodelist 上实现与 Array.prototype.filter 同样的功能的方法。小菜一碟的事:


所以,Generator 很实用吧?当然,这是实现自定义迭代器最简单直接的方式,并且,在 ES6 中,迭代器是数据集和循环的新标准。

但,这还不是 Generator 的全部功能。

异步代码

异步 API 通常都需要一个回调函数,这意味着每次你都需要编写一个匿名函数来处理异步结果。如果同时处理三个异步事务,我们看到的是三个缩进层次的代码,而不仅仅是三行代码。

看下面代码:


异步 API 通常都有错误处理的约定,不同的 API 有不同的约定。大多数情况下,错误是默认丢弃的,甚至有些将成功也默认丢弃了。

直到现在,这些问题仍是我们处理异步编程必须付出的代价,而且我们也已经接受了异步代码只是看不来不像同步代码那样简单和友好。

Generator 给我们带来了希望,我们可以不再采用上面的方式。

Q.async()是一个将 Generator 和 Promise 结合起来处理异步代码的实验性尝试,让我们的异步代码类似于相应的同步代码。

例如:


最大的区别在于,需要在每个异步方法调用的前面添加 yield 关键字。

在 Q.async 中,添加一个 if 语句或 try-catch 异常处理,就和在同步代码中的方式一样,与其他编写异步代码的方式相比,减少了很多学习成本。

Generator 为我们提供了一种更适合人脑思维方式的异步编程模型。但更好的语法也许更有帮助,在 ES7 中,一个基于 Promise 和 Generator 的异步处理函数正在规划之中,灵感来自 C# 中类似的特性。

兼容性

在服务器端,现在就可以直接在 io.js 中使用 Generator(或者在 NodeJs 中以 --harmony 启动参数来启动 Node)。

在浏览器端,目前只有 Firefox 27 和 Chrome 39 以上的版本才支持 Generator,如果想直接在 Web 上使用,你可以使用 Babel 或 Google 的 Traceur 将 ES6 代码转换为 Web 友好的 ES5 代码。

一些题外话:JS 版本的 Generator 最早是由 Brendan Eich 实现,他借鉴了 Python Generator的实现,该实现的灵感来自 Icon,早在 2006 年的 Firefox 2.0 就吸纳了 Generator。但标准化的道路是坎坷的,一路下来,其语法和行为都发生了很多改变,Firefox 和 Chrome 中的 ES6 Generator 是由 Andy Wingo 实现 ,这项工作是由 Bloomberg 赞助的。

yield;

关于 Generator 还有一些未提及的部分,我们还没有涉及到 .throw() 和 .return() 方法的使用,.next() 方法的可选参数,还有 yield* 语法。但我认为这篇文章已经够长了,就像 Generator 一样,我们也暂停一下,另外找个时间再剩余的部分。

我们已经介绍了 ES6 中两个非常重要的特性,那么现在可以大胆地说,ES6 将改变我们的生活,看似简单的特性,却有极大的用处。


推荐阅读
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • Java 8 引入了 Stream API,这一新特性极大地增强了集合数据的处理能力。通过 Stream API,开发者可以更加高效、简洁地进行集合数据的遍历、过滤和转换操作。本文将详细解析 Stream API 的核心概念和常见用法,帮助读者更好地理解和应用这一强大的工具。 ... [详细]
  • voc生成xml 代码
    目录 lxmlwindows安装 读取示例 可视化 生成示例 上面是代码,下面有调用示例 api调用代码,其实只有几行:这个生成代码也很简 ... [详细]
  • Go语言中的高效排序与搜索算法解析
    在探讨Go语言中高效的排序与搜索算法时,本文深入分析了Go语言提供的内置排序功能及其优化策略。通过实例代码,详细讲解了如何利用Go语言的标准库实现快速、高效的排序和搜索操作,为开发者提供了实用的编程指导。 ... [详细]
  • 深入解析十大经典排序算法:动画演示、原理分析与代码实现
    本文深入探讨了十种经典的排序算法,不仅通过动画直观展示了每种算法的运行过程,还详细解析了其背后的原理与机制,并提供了相应的代码实现,帮助读者全面理解和掌握这些算法的核心要点。 ... [详细]
  • 本项目在Java Maven框架下,利用POI库实现了Excel数据的高效导入与导出功能。通过优化数据处理流程,提升了数据操作的性能和稳定性。项目已发布至GitHub,当前最新版本为0.0.5。该项目不仅适用于小型应用,也可扩展用于大型企业级系统,提供了灵活的数据管理解决方案。GitHub地址:https://github.com/83945105/holygrail,Maven坐标:`com.github.83945105:holygrail:0.0.5`。 ... [详细]
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • Spring框架入门指南:专为新手打造的详细学习笔记
    Spring框架是Java Web开发中广泛应用的轻量级应用框架,以其卓越的功能和出色的性能赢得了广大开发者的青睐。本文为初学者提供了详尽的学习指南,涵盖基础概念、核心组件及实际应用案例,帮助新手快速掌握Spring框架的核心技术与实践技巧。 ... [详细]
  • 深入解析Gradle中的Project核心组件
    在Gradle构建系统中,`Project` 是一个核心组件,扮演着至关重要的角色。通过使用 `./gradlew projects` 命令,可以清晰地列出当前项目结构中包含的所有子项目,这有助于开发者更好地理解和管理复杂的多模块项目。此外,`Project` 对象还提供了丰富的配置选项和生命周期管理功能,使得构建过程更加灵活高效。 ... [详细]
  • MySQL性能优化与调参指南【数据库管理】
    本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ... [详细]
  • Go语言实现Redis客户端与服务器的交互机制深入解析
    在前文对Godis v1.0版本的基础功能进行了详细介绍后,本文将重点探讨如何实现客户端与服务器之间的交互机制。通过具体代码实现,使客户端与服务器能够顺利通信,赋予项目实际运行的能力。本文将详细解析Go语言在实现这一过程中的关键技术和实现细节,帮助读者深入了解Redis客户端与服务器的交互原理。 ... [详细]
  • Django框架下的对象关系映射(ORM)详解
    在Django框架中,对象关系映射(ORM)技术是解决面向对象编程与关系型数据库之间不兼容问题的关键工具。通过将数据库表结构映射到Python类,ORM使得开发者能够以面向对象的方式操作数据库,从而简化了数据访问和管理的复杂性。这种技术不仅提高了代码的可读性和可维护性,还增强了应用程序的灵活性和扩展性。 ... [详细]
  • 修复一个 Bug 竟耗时两天?真的有那么复杂吗?
    修复一个 Bug 竟然耗费了两天时间?这背后究竟隐藏着怎样的复杂性?本文将深入探讨这个看似简单的 Bug 为何会如此棘手,从代码层面剖析问题根源,并分享解决过程中遇到的技术挑战和心得。 ... [详细]
  • Java队列机制深度解析与应用指南
    Java队列机制在并发编程中扮演着重要角色。本文深入解析了Java队列的各种实现类及其应用场景,包括`LinkedList`、`ArrayBlockingQueue`和`PriorityQueue`等,并探讨了它们在高并发环境下的性能表现和适用场景。通过详细分析这些队列的内部机制和使用技巧,帮助开发者更好地理解和应用Java队列,提升系统的设计和架构能力。 ... [详细]
  • Django新手指南:第三步——构建你的首个项目
    在本教程中,我们将引导你完成创建第一个Django应用的步骤。通过实际操作,你将逐步了解Django框架的核心概念和基本功能。从项目结构到视图和模板的实现,我们将详细介绍每个环节,帮助你快速上手并构建出一个功能完整的Web应用。 ... [详细]
author-avatar
beijing750
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有