ES9 生成器的使用指南
ES9 生成器是 ECMAScript 2018 标准中新增的语法，它提供了一种声明式生成迭代器的方式，可以用于简化异步编程和迭代处理等操作。本篇文章将详细介绍 ES9 生成器的用法，并提供一些示例代码方便读者学习与实践。
一、生成器的基本语法
ES9 生成器的基本语法如下：
function* generatorName() { // generator function body yield expression; }
其中，function* 是生成器函数的声明关键词，generatorName 是生成器函数的名称。yield 是生成器函数中的语句关键词，表示将产生一个可迭代值并暂停生成器函数的执行，等待下次调用。
二、生成器的迭代和调用
使用生成器函数创建的迭代器，可以通过 next() 方法进行调用和迭代，示例代码如下：
-- -------------------- ---- ------- --------- ------------ - ----- -------- ----- -------- ------ ------- - ----- -------- - ------------- ----------------------------- -- - ------ -------- ----- ----- - ----------------------------- -- - ------ -------- ----- ----- - ----------------------------- -- - ------ ------- ----- ---- -展开代码
在上面的代码中，helloWorld() 函数是一个生成器函数，它包含了三个 yield 语句和一个 return 语句。我们将函数执行后所返回的迭代器赋值给了变量 iterator，然后通过 next() 方法迭代生成器函数中所产生的值。
值得注意的是，在生成器函数中使用 return 语句会在生成器函数执行结束后终止迭代器的迭代，此时 done 属性的值将变为 true。
三、生成器的异步编程
ES9 生成器在异步编程中尤为方便，我们可以通过 yield 语句来阻塞异步函数的执行，并返回异步操作所产生的结果。示例如下：
-- -------------------- ---- ------- -------- -------------- - ------ --- --------------- -- - ------------- -- - ------------- ---- --------- -- ------------- - ------ --- - --------- -------------- - ----- ----- - ----- ----------------------------------- ------------------- ----- ----- - ----- ----------------------------------- ------------------- ----- ----- - ----- ----------------------------------- ------------------- - ----- -------- - --------------- ----- ------- - ---------------------- ------------------ -- - ------------------------------------- -- - ------------------------------------- -- - --------------------- --- --- ---展开代码
在上面的代码中，我们使用了 fetchData() 来模拟异步请求，并将其包装成了一个 Promise 对象。在 fetchAllData() 函数中，我们通过 yield 语句来阻塞异步请求的执行，并在每个异步请求返回结果后通过 next() 方法恢复生成器函数的执行。
四、生成器的错误处理
在 ES9 生成器中，我们可以使用 try...catch 语句来处理可能产生的异常。示例如下：
-- -------------------- ---- ------- --------- -------------- - --- - ----- ------- - ----- -------- ---- --- --------------------- ----- ------- - ----- -------- ---- --- --------------------- ----- ------- - ----- -------- ---- --- --------------------- - ----- ----- - ------------------- - - ----- -------- - --------------- ---------------- -- ------- -------- ---- --- ----- ------ ------------------ ------------ -------------展开代码
在上面的代码中，dataConsumer() 函数中的 try...catch 语句可以捕获可能发生的异常，并通过 console.error() 输出异常信息。当我们调用 iterator.throw(new Error('Error occurred!')) 时，生成器函数将会抛出一个异常并调用 catch 块。
五、生成器的对象解构
在 ES9 生成器中，我们可以使用对象解构的方式来获取生成器函数所返回的值。示例如下：
-- -------------------- ---- ------- --------- ---------- - ----- --- ----- --- ----- --- ------ --- - ----- - -- -- - - - ----------- -------------- -- --- -- -- -- --展开代码
在上面的代码中，我们通过对象解构的方式将 generate() 函数中产生的可迭代值 10、20 和 30 依次赋值给了变量 x、y 和 z。如果想获取 return 语句返回的值，可以通过对象解构的方式将其赋值给一个单独的变量，如下：
-- -------------------- ---- ------- --------- ---------- - ----- --- ----- --- ----- --- ------ --- - ----- - -- -- - - - ----------- ----- ------ - ------------------------ -------------------- -- --展开代码
在上面的代码中，我们通过 next() 方法手动执行了 generate() 函数，并获取了其返回的值 40。将其赋值给了变量 result。
结语：
以上就是 ES9 生成器的用法详解，通过学习本文所介绍的内容，相信读者已经能够掌握生成器函数的基本语法、迭代和调用、异步编程、错误处理和对象解构等方面的知识。欢迎读者在实际项目中应用并进一步完善此技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c83d10e46428fe9ee8396f
