浅谈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 不会处理它。

还记得我们的第一个例子吗:
在这里插入图片描述

你可以看到生成器只会生成值,直到但不包括 donetrue 时。

因此 return 完成生成器并终止函数(像任何其他函数一样)。

在这里插入图片描述

最后的思考

JavaScript 生成器为控制流、内存效率和异步处理提供了强大的解决方案。它们通过动态动画、流数据和管理副作用增强了 Web 开发。

让我们利用生成器的通用性进行优雅和高效的 JavaScript 编程。

JavaScript 的每一个疯狂的地方

就在你以为已经知道所有怪异之处的时候。避免痛苦的错误并节省宝贵时间,通过 JavaScript 的每一个疯狂的地方这本引人入胜的指南来了解 JavaScript 的微妙陷阱和鲜为人知的部分。

  • 33
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天也想MK代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值