Generator 函数是 ES6 中引入的新的函数类型,它可以让函数在执行过程中被暂停和恢复。Generator 函数是一个状态机,封装了多个内部状态,每次调用 Generator 函数都会返回一个值,同时暂停函数执行,等待重新调用。Generator 函数的返回值是一个指向内部状态的指针对象(Iterator)。
基本用法
定义一个 Generator 函数,需要在函数名前面加上 *
。
--------- --------- - ----- --- ----- --- ----- --- - ----- ------ - --------- -------------------------- -- ------- ---- ----- ------ -------------------------- -- ------- ---- ----- ------ -------------------------- -- ------- ---- ----- ------ -------------------------- -- ------- ---------- ----- -----
上面代码中,定义了一个 Generator 函数 genFunc
,然后使用 next()
方法逐个调用函数,可以看到每次执行函数到 yield
关键字时都会暂停并返回结果。
恢复执行
调用 next()
方法时可以传入参数,这个参数就是上一个 yield
关键字的返回值。Generator 函数会将这个参数赋值给上一个 yield
表达式,并且从这个位置继续执行。
--------- ------ - ----- - - ----- --- ----- - - ----- --- -------------- -- - ----- --- - ------ ----------------------- -- ------- ---- ----- ------ ------------------------------ -- ------- ---- ----- ------ ------------------------------ -- ----- ----- ----------------------- -- ------- ---------- ----- -----
上面代码中,第一次调用 next()
方法时没有传入参数,生成器函数执行到第一个 yield
关键字处,并返回结果 a
。第二次调用 next('Hello')
方法时将参数 "Hello"
传入,这个参数就是上一个 yield
表达式的返回值,代码继续执行到第二个 yield
关键字处,并返回结果 b
。第三次调用 next('World')
方法时将参数 "World"
传入,代码继续执行到函数结束,控制台输出 Hello World
。
使用 for...of 语句
可以使用 for...of
语句直接循环遍历 Generator 函数的每一个值。
--------- -------- - ----- ----- ----- ------- ----- ------ - --- ---- ----- -- --------- - ------------------ -
上面代码中,Generator 函数 colors()
定义了三个 yield
关键字,使用 for...of
循环逐个输出三个颜色。
使用 Generator 实现异步操作
Generator 函数可以使用 yield
关键字暂停函数的执行过程,等待其他异步操作完成后再继续执行,这样可以方便地实现异步操作。
-------- -------------- - ------ --- --------------- -- - ------------- -- - ------------- -------- ---- -------- -- ----- -- - --------- ----------- - ----- ----- - ----- ----------------- ------------------ ----- ----- - ----- ----------------- ------------------ ----- ----- - ----- ----------------- ------------------ - ----- -------- - ----------- ----- ------- - --------------------- -------------------- -- - ----------------------------------------- -- - ----------------------------------------- -- - ---------------------- -- -- --
上面代码中,定义了 fetchData
函数,模拟异步请求数据并返回一个 Promise
对象。然后定义了一个 asyncFunc
Generator 函数,使用 yield
关键字分别接收三个异步操作的结果,并输出到控制台。接着定义了一个 asyncGen
对象,调用 next()
方法后可以执行到第一个异步操作。使用 Promise
对象的链式调用完成异步操作,最终输出结果。
总结
Generator 函数是一种新的函数类型,可以暂停函数执行并返回值,从而实现异步操作。Generator 函数是一种强大的工具,良好的运用可以提高代码的可读性和可维护性。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65b7150badd4f0e0fffae2b0