简介
Generator 是 ES6 中新增的一种函数类型，其特别之处在于可以控制函数的执行过程。Generator 函数在执行到 yield 语句时，会暂停执行，直到再次调用 next() 方法时，才会继续执行。这一特性使得 Generator 函数在异步编程和流程控制方面具有很大的用途。
Generator 函数的定义
在 ECMAScript 6 中，Generator 函数的定义方式与普通函数有所不同，需要在函数名称后加一个星号。
function* generatorFunc() {
// ...
}使用 yield 控制函数执行
Generator 函数的主要特性是可以控制函数的执行过程，而这一特性正是由 yield 语句实现的。当执行到 yield 语句时，函数会暂停执行，直到再次调用 next() 方法时，才会继续执行。
-- -------------------- ---- ------- --------- --------------- - --------------------- ------ ------------------- - ----- --- - ---------------- ----------- -- -- ------- ----------- -- -- -----
生成器的返回值
Generator 函数可以通过 return 语句返回一个值，同时结束函数的执行。在这种情况下，返回值会被包装在一个对象中，可以在调用的时候通过 value 属性获取。
-- -------------------- ---- ------- --------- --------------- - ----- -- ----- -- ----- -- ------ ------- - ----- --- - ---------------- ----------- -- - ------ -- ----- ----- - ----------- -- - ------ -- ----- ----- - ----------- -- - ------ -- ----- ----- - ----------- -- - ------ ------- ----- ---- -
Generator 函数作为迭代器
由于 Generator 函数具有 yield 和 return 语句的特性，因此可以将其作为迭代器使用，用于遍历一个集合。
-- -------------------- ---- -------
--------- ----------------------- -
--- ------ ---- -- ----------- -
----- -----
-
-
----- --- - --- -- ---
----- -------- - -----------------
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ ---------- ----- ---- -使用 Generator 实现异步编程
由于 Generator 函数可以控制其执行过程，可以有效地实现异步编程。在异步编程中，需要等待某个异步操作完成才能进行下一步操作，这时候 Generator 函数的暂停执行特性就非常有用。
-- -------------------- ---- ------- --------- --------- - ----- ---- - ----- ------------------- ----- ----- - ----- ------------------------- ------- ---- ------ ------ - ----- --- - ---------- ---------------- --------- -- ----------- -------------- -- ------------------------- --------- -- ----------- --------------- -- -------------------------- -- ---- ------ -- ----------- -- --------------------
上面的代码中，Generator 函数通过 yield 语句暂停执行，等待异步操作完成后再继续执行下一步操作。
结论
在 ES6 中，Generator 函数是一个非常有用的编程特性。通过使用 yield 控制函数的执行过程，可以实现许多有用的功能，包括将 Generator 函数作为迭代器、实现异步编程等等。在编写前端代码时，熟练掌握 Generator 函数的使用技巧可以提高编程效率，同时也能通过优雅的代码实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67513a948bd460d3ad878c3b