生成器函数是 ECMAScript 2015 引入的一个新概念，它允许我们在遍历数据时，暂停函数执行，等到需要时再恢复执行。在 ECMAScript 2017 中，生成器函数加入了一些新特性，本篇文章将详解 ECMAScript 2017 中的生成器函数。
从 ECMAScript 2015 的生成器函数开始
在 ECMAScript 2015 中，通过 function* 关键字定义的函数就是一个生成器函数：
function* generator() { yield 1; yield 2; yield 3; }
在生成器函数中，通过 yield 关键字，可以将函数执行暂停并返回一个值，而函数会保留其上下文环境，直到下一次继续执行时，从上一次暂停的位置继续向下执行，如上例所示。
可以使用 next() 方法执行生成器函数，每次执行 next() 时，函数会执行到下一个 yield 语句为止：
const gen = generator(); console.log(gen.next()); // { value: 1, done: false } console.log(gen.next()); // { value: 2, done: false } console.log(gen.next()); // { value: 3, done: false } console.log(gen.next()); // { value: undefined, done: true }
可以看到，每次执行 next() 时，返回的都是一个对象，其中 value 字段表示 yield 返回的值，done 表示函数是否执行完毕。
ECMAScript 2017 中的生成器函数新特性
1. yield* 语句
在 ECMAScript 2017 中，我们可以在生成器函数中使用 yield* 语句，它可以将控制权交给另一个生成器函数，例如：
-- -------------------- ---- ------- --------- ------------ - ----- -- ------ ------------- ----- -- - --------- ------------ - ----- -- ----- -- - ----- --- - ------------- ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ ---------- ----- ---- -展开代码
可以看到，当执行到 yield* generator2() 语句时，控制权就被交给了 generator2() 函数，直到 generator2() 函数执行完毕后，控制权才会交回给 generator1() 函数。
2. return() 方法
在 ECMAScript 2017 中，我们可以在生成器函数中使用 return() 方法，它可以使生成器函数立即执行完毕，并返回指定的值，例如：
-- -------------------- ---- ------- --------- ----------- - ----- -- ----- -- ----- -- - ----- --- - ------------ ------------------------ -- - ------ -- ----- ----- - --------------------------- -- - ------ -- ----- ---- - ------------------------ -- - ------ ---------- ----- ---- -展开代码
可以看到，当执行 gen.return(4) 时，生成器函数立即执行完毕，并返回 4，此时生成器函数已经结束。
3. 异步生成器函数
在 ECMAScript 2017 中，我们可以定义异步生成器函数，它定义方式与普通生成器函数相同，只需在 function* 前加上 async 关键字即可，例如：
-- -------------------- ---- ------- ----- --------- ----------- - ----- ----- ------------------- ----- ----- ------------------- ----- ----- ------------------- - ----- --- - ------------ ------ -- -- - ----------------- ------------ -- - ------ -- ----- ----- - ----------------- ------------ -- - ------ -- ----- ----- - ----------------- ------------ -- - ------ -- ----- ----- - ----------------- ------------ -- - ------ ---------- ----- ---- - -----展开代码
可以看到，异步生成器函数返回的是一个 Promise 对象，我们可以使用 await 关键字等待异步操作完成后再继续执行生成器函数。
总结
通过本篇文章，我们了解了 ECMAScript 2017 中生成器函数的三个新特性：yield* 语句、return() 方法和异步生成器函数。这些新特性为生成器函数带来了更多的功能和灵活性，我们可以更加方便地使用生成器函数来处理数据遍历、异步任务等场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fee13b95b1f8cacdd8d6c4
