JavaScript ES6引入了Generator特性，它是一种特殊类型的函数，可以通过yield关键字控制执行流程，从而实现更加灵活的异步编程方式。本文将详细介绍Generator的语法、用法和实际应用场景，希望能够为前端开发者提供深度学习和指导意义。
Generator概述
Generator是ES6中新增的一种函数类型，与普通函数不同的是，它可以暂停和恢复执行，并且可以产生一个可迭代对象。在Generator函数内部，使用yield关键字可以使函数执行到此处暂停，并将yield后面的值返回给调用方。当下一次调用next方法时，函数会从上次暂停的位置继续执行，直至遇到下一个yield或return语句。
以下是一个简单的Generator示例：
--------- ----- - ----- -- ----- -- ------ ------- - ----- -------- - ------ ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ ------- ----- ---- -
在上面的示例中，我们定义了一个名为foo的Generator函数，它依次返回数字1、2和字符串'done'。通过调用foo函数得到的iterator对象，可以使用next方法依次获取每个返回值。当函数执行到最后一条语句时，它会立即终止并返回一个包含value和done属性的对象，表示Generator已经完成。
Generator语法
Generator函数的定义方式和普通函数类似，只是在function关键字后面加上一个星号（*）来标识它是一个Generator函数。以下是一个示例：
--------- ----- - -- --- -
在Generator函数内部，我们可以使用yield关键字来暂停函数的执行，并将一个值返回给调用方。例如：
--------- ----- - ----- -- ----- -- ------ ------- -
可以看到，在Generator函数中使用yield关键字时，函数会在此处暂停并将yield后面的值返回给调用方。当再次调用next方法时，函数会从上次暂停的位置继续执行，直至遇到下一个yield或return语句。
Generator用法
Generator函数的主要用途是异步编程，它可以通过yield关键字来实现更加灵活的流程控制。我们可以先看一个简单的异步编程示例：
-------- ----------- -
------------- -- -
----------------- ----------
-- ------
-
------------
--------------------- ----------在上面的示例中，我们定义了一个fetchData函数，它会在1秒钟后输出'Data fetched'。在调用fetchData函数之后，我们还打印了一句'Fetching data...'。由于setTimeout是异步的，所以打印的顺序是先'Fetching data...'，再'Data fetched'。
现在我们可以使用Generator函数来实现更加灵活的异步编程方式：
--------- ----------- - ----- --- --------------- -- ------------- -- ------------- ---------- ------- - ----- -------- - ------------ ------------------------------- -- - ------------------ --- --------------------- ----------
在上面的示例中，我们将fetchData函数改造成了一个Generator函数，它返回一个Promise对象。在调用next方法时，我们通过value属性获取到了这个Promise对象，并使用then方法处理Promise的结果。由于Promise是异步的，所以'Fetching data...'会先打印出来，等待1秒钟后才会打印'Data fetched'。
除了异步编程之外，Generator函数还可以用于生成器函数（Generator Function）和迭代器
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/3713