JavaScript 生成器的5个实用案例
你阅读完成本文后,将成为 JavaScript 生成器的专家。
它们远不止是一个花俏的特性,我们将探索许多强大的使用案例,包括创建引人入胜的动画,通过互联网流式传输视频,节省内存等等。
如果你从未听说过它们,那么你可能会错过很多。
生成器是这些神奇的函数,你可以在任何时候暂停和恢复它们 - 它们不会连续执行。
星号 *
将函数标记为生成器,yield
根据 .next()
的调用按需生成值,直到生成器done
。
就像物理发电机不会一次性产生所有电力,而是随着时间的推移逐步产生电力。
你可以使用 for..of
循环代替调用 next()
,当生成器生成大量数据时,这很方便:
延迟求值
“只在必要时计算”。
与 JavaScript 中的常规函数完全执行并返回结果不同。
假设你需要一系列数字,但你不确定需要多少个。这里是一个生成器的帮助方法:
只有当你请求下一个数时,你才会得到它。
更好的内存利用
生成器不会将所有结果保存在内存中,它们是即时生成的。
想象一下,你需要100万个数字的序列。使用常规函数,你需要在数组中存储所有这些数字,占用大量内存。
生成器的效率更高:
处理异步任务
你知道 Babel 会将 async/await
转译成生成器用于不原生支持它的 JavaScript 版本吗?
Babel 将这个:
转换为这个:
打字动画
打字动画吸引用户的注意力,使你的网站更具视觉吸引力。
它们通过模拟人类的打字行为来为网站增加个性和角色,创造更加人性化的体验,建立独特的品牌认同。
所以有了所有这些好处,你一定很兴奋地要在网页中注入这些充满活力的视觉效果了。
这里是一个不错的实现方式,使用递归和 setTimeout()
:
但是在这种情况下,生成器的表现更加出色:
由于我们可以在任何时间生成值,我们可以使用 setInterval()
按时间间隔进行。
异步处理
注意:这与之前我们看到作为 async/await
基石的生成器不同。我们在这里讨论异步生成器。
这里是一个异步生成器的例子:
这里是如何使用这个生成器的:
这是一个在结构化、可读的方式中为 web 应用程序流式传输数据的强大工具 - 就像 YouTube 这样的视频共享应用中对视频流进行缓冲和流式处理的函数:
要使用这个 async
生成器,我们会用 for await..of
循环:
redux-saga
redux-saga
是一个用于管理应用程序副作用的库,拥有超过100万的周下载量。
生成器在这个库中发挥着重要作用,处理 redux 动作以简化测试和错误处理。
看这个简单的 saga:
当 USER_FETCH_REQUESTED
动作被分发时,redux-saga
运行生成器,然后调用 fetchData()
执行异步网络请求。
return 的注意事项
在生成器函数中 return
一个值会发生什么?我们来看:
为什么 Neymar
不是生成值的一部分?
让我们使用 .next()
来看看 done
属性是否与此有关:
原来 return
不是生成值,所以 for..of
不会处理它。
还记得我们的第一个例子吗:
你可以看到生成器只会生成值,直到但不包括 done
为 true
时。
因此 return 完成生成器并终止函数(像任何其他函数一样)。
最后的思考
JavaScript 生成器为控制流、内存效率和异步处理提供了强大的解决方案。它们通过动态动画、流数据和管理副作用增强了 Web 开发。
让我们利用生成器的通用性进行优雅和高效的 JavaScript 编程。
JavaScript 的每一个疯狂的地方
就在你以为已经知道所有怪异之处的时候。避免痛苦的错误并节省宝贵时间,通过 JavaScript 的每一个疯狂的地方这本引人入胜的指南来了解 JavaScript 的微妙陷阱和鲜为人知的部分。