浅谈JavaScript 生成器

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 的微妙陷阱和鲜为人知的部分。