ES6 的生成器函数（Generator）是一种函数，可以在函数执行过程中暂停和恢复。它们使用 function* 声明，可以通过 yield 关键字暂停函数执行并返回一个值，然后通过 next() 方法恢复函数执行。
生成器函数在前端开发中很有用，可以用来简化异步编程，生成迭代器等。在本文中，我们将详细讲解 ES6 的生成器函数，包括语法、使用方法和示例代码。
生成器函数的语法
生成器函数使用 function* 声明，与普通函数不同的是，它可以使用 yield 关键字暂停函数执行并返回一个值。例如，下面是一个简单的生成器函数：
--------- ------------- - ----- -- ----- -- ----- -- -
这个生成器函数返回一个迭代器对象，可以通过调用 next() 方法来获取每个 yield 语句返回的值。
使用生成器函数
使用生成器函数有两种方法：通过 next() 方法手动控制函数执行，或者使用 for...of 循环自动遍历函数返回的值。
手动控制函数执行
可以通过调用迭代器对象的 next() 方法手动控制函数执行。每次调用 next() 方法，函数会从上次暂停的位置继续执行。如果函数执行到了最后一个 yield 语句，迭代器对象的 done 属性将变为 true。
例如，下面的代码手动调用 myGenerator() 函数，并输出每个 yield 语句返回的值：
----- -------- - -------------- ----------------------------------- -- - ----------------------------------- -- - ----------------------------------- -- - ---------------------------------- -- ----
自动遍历函数返回的值
可以使用 for...of 循环自动遍历函数返回的值。每次迭代，for...of 循环会自动调用迭代器对象的 next() 方法，并返回 yield 语句返回的值。如果函数执行到了最后一个 yield 语句，循环将自动结束。
例如，下面的代码使用 for...of 循环遍历 myGenerator() 函数返回的值：
--- ------ ----- -- -------------- - ------------------- - -- --- -- - -- - -- -
生成器函数的应用
生成器函数在前端开发中有很多应用，包括简化异步编程、生成迭代器等。
简化异步编程
生成器函数可以用来简化异步编程。例如，下面的代码使用生成器函数和 Promise 对象实现了一个异步操作的简单封装：
--------- ---------------- -
----- ------ - ----- --- ----------------- -- -
------------- -- -
-------------- --------- ---------
-- ------
---
--------------------
-
----- -------- - -----------------
----- ------- - ----------------------
--------------------- -- -
----------------------
---在这个例子中，asyncOperation() 函数返回一个 Promise 对象，并在 Promise 的 resolve() 回调函数中暂停函数执行并返回一个值。然后，通过手动调用 next() 方法将返回的值传递给函数，并继续执行函数。
生成迭代器
生成器函数可以用来生成迭代器，从而简化迭代器的实现。例如，下面的代码使用生成器函数实现了一个简单的迭代器：
--------- ------------ -
--- - - --
----- ------ -
----- ----
-
-
----- -------- - -------------
----------------------------------- -- -
----------------------------------- -- -
----------------------------------- -- -在这个例子中，myIterator() 函数返回一个迭代器对象，并在循环中不断返回一个递增的值。由于使用了生成器函数，实现迭代器变得非常简单。
总结
本文介绍了 ES6 的生成器函数，包括语法、使用方法和应用场景。生成器函数是一种可以在函数执行过程中暂停和恢复的函数，可以用来简化异步编程、生成迭代器等。希望本文能够帮助读者更好地理解和使用生成器函数。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c896aeadd4f0e0ff2603e6