JavaScript 是一门广泛应用于 Web 开发的编程语言，而生成器（Generator）是 ECMAScript 2015 引入的新特性之一。生成器能够让开发者更加方便地控制异步操作和迭代器的行为。在 ECMAScript 2020 中，生成器的功能得到了一些增强和改进，本文将对 ECMAScript 2020 的生成器进行详细的介绍和解释。
生成器的基本概念
生成器是一种特殊的函数，它可以在函数体内部暂停执行，并返回一个中间结果。当再次调用生成器函数时，它会从上一次暂停的地方继续执行，并返回下一个中间结果，直到函数执行完毕或者遇到 return 语句。
生成器函数使用 function* 声明，其中 * 表示这是一个生成器函数。生成器函数内部使用 yield 语句来暂停执行并返回一个中间结果。例如：
--------- ------------- - ----- -- ----- -- ----- -- -
上面的代码定义了一个生成器函数 myGenerator，它返回一个迭代器对象，每次调用迭代器对象的 next() 方法，都会执行生成器函数的下一条语句，并返回一个包含 value 和 done 两个属性的对象。例如：
----- --------- - -------------- ------------------------------ -- - ------ -- ----- ----- - ------------------------------ -- - ------ -- ----- ----- - ------------------------------ -- - ------ -- ----- ----- - ------------------------------ -- - ------ ---------- ----- ---- -
上面的代码首先创建了一个迭代器对象 generator，然后每次调用 generator.next() 方法，都会执行生成器函数的下一条语句，并返回一个包含 value 和 done 两个属性的对象。当生成器函数执行完毕时，done 属性为 true，value 属性为 undefined。
生成器的进阶用法
除了基本的生成器用法外，ECMAScript 2020 还增加了一些新特性，让生成器更加强大和灵活。
生成器的返回值
在 ECMAScript 2015 中，生成器函数的返回值只能是 undefined。但是在 ECMAScript 2020 中，生成器函数可以使用 return 语句返回一个值，并且这个值可以在迭代器对象的 value 属性中获取。例如：
--------- ------------- - ----- -- ----- -- ----- -- ------ ------- - ----- --------- - -------------- ------------------------------ -- - ------ -- ----- ----- - ------------------------------ -- - ------ -- ----- ----- - ------------------------------ -- - ------ -- ----- ----- - ------------------------------ -- - ------ ------- ----- ---- -
上面的代码中，生成器函数 myGenerator 在执行完最后一个 yield 语句后，使用 return 语句返回了一个值 'done'。当迭代器对象的 next() 方法执行到最后，value 属性就会返回这个值。
生成器的参数传递
在 ECMAScript 2020 中，生成器函数可以接受参数，并且这些参数可以在生成器函数内部使用。例如：
--------- ------------------ ---- -
--- ---- - - ------ - -- ---- ---- -
----- --
-
-
----- --------- - -------------- ---
------------------------------ -- - ------ -- ----- ----- -
------------------------------ -- - ------ -- ----- ----- -
------------------------------ -- - ------ -- ----- ----- -
------------------------------ -- - ------ ---------- ----- ---- -上面的代码中，生成器函数 myGenerator 接受了两个参数 start 和 end，并使用 for 循环生成从 start 到 end 的整数。当调用迭代器对象的 next() 方法时，生成器函数会从上一次暂停的地方继续执行，并返回下一个整数。
生成器的错误处理
在 ECMAScript 2020 中，生成器函数可以使用 try...catch 语句捕捉异常，并且这些异常可以在迭代器对象的 throw() 方法中抛出。例如：
--------- ------------- -
--- -
----- --
----- --
----- --
- ----- --- -
---------------
-
-
----- --------- - --------------
------------------------------ -- - ------ -- ----- ----- -
------------------------------- ----------------- -- ------ -----
------------------------------ -- - ------ ---------- ----- ---- -上面的代码中，生成器函数 myGenerator 使用 try...catch 语句捕捉了一个异常，并在捕捉到异常时输出了错误信息。当调用迭代器对象的 throw() 方法时，生成器函数会从上一次暂停的地方继续执行，并抛出捕捉到的异常。
生成器的应用场景
生成器的主要应用场景是控制异步操作和迭代器的行为。例如，在使用 Promise 进行异步操作时，我们可以使用生成器来简化代码：
--------- ------------- -
----- ------- - ----- ---------------------------------------
----- ------- - ----- ---------------------------------------
-------------------- ---------
-
-------- ----------------------- -
----- -------- - ------------
-------- ------------------ -
-- ---------------- -
------ ---------------------------------
-
------ --------------------------------
------- -- --------------------------
-------- -- -------------------
-
------ -------------------------
-
--------------------------上面的代码中，生成器函数 myGenerator 使用 yield 语句控制异步操作的执行顺序。当调用 runGenerator(myGenerator) 时，会返回一个 Promise 对象，该 Promise 对象会依次执行生成器函数中的异步操作，并在所有异步操作完成后输出结果。
除了控制异步操作外，生成器还可以用于控制迭代器的行为。例如，我们可以使用生成器函数实现一个自定义的迭代器：
--------- ------------ -
--- - - --
----- ------ -
----- ----
-
-
----- -------- - -------------
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -上面的代码中，生成器函数 myIterator 实现了一个自定义的迭代器，它会不断生成递增的整数。当调用迭代器对象的 next() 方法时，生成器函数会从上一次暂停的地方继续执行，并返回下一个整数。
总结
本文详细介绍了 ECMAScript 2020 中的生成器特性，包括生成器的基本概念、生成器的进阶用法和生成器的应用场景。生成器是一种强大而灵活的特性，可以帮助开发者更好地控制异步操作和迭代器的行为。在实际开发中，我们可以使用生成器来简化代码，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65fce3dbd10417a22284137e