了解 JavaScript 生成器:强大的代码流控制工具
来源:dev.to
时间:2024-11-28 14:18:53 262浏览 收藏
今日不肯埋头,明日何以抬头!每日一句努力自己的话哈哈~哈喽,今天我将给大家带来一篇《了解 JavaScript 生成器:强大的代码流控制工具》,主要内容是讲解等等,感兴趣的朋友可以收藏或者有更好的建议在评论提出,我都会认真看的!大家一起进步,一起学习!
生成器是 javascript 中最强大的功能之一,它允许我们编写可以根据需要暂停和恢复的代码。与一次执行所有代码的常规函数不同,生成器使用延迟执行,增量返回值,从而更容易处理数据序列、迭代或长时间运行的进程。
发电机如何工作?
在javascript中,生成器是使用function*关键字定义的,并与yield关键字结合,允许部分执行函数。每次我们调用生成器函数时,它不会立即执行,而是返回一个允许受控执行的迭代器。
示例:
const id = (function* () { let i = 1; while (true) { yield i; i += 1; } })();
在此示例中,函数生成器返回无限的数字序列,其中每个数字仅在需要时生成并返回。
yield 有什么作用?
yield 关键字停止生成器的执行并将值返回给外界。在下一个函数调用(使用 next())时,生成器将从中断处继续。
调用生成器的样子:
console.log(id.next().value); // 1 console.log(id.next().value); // 2 console.log(id.next().value); // 3
每次调用 next() 都会返回数组的下一个值,并在下一个yield 时暂停该函数。
发电机的优点
懒惰:
生成器不会立即执行所有内容,而是仅在需要时才生成值。这非常适合处理无限序列或大型数据数组。流量控制:
暂停和恢复该功能的可能性可以更好地控制长时间运行的进程。效率:
生成器不是将所有值存储在内存中,而是一次返回一个值,这减少了内存消耗。
发电机的缺点
虽然生成器很有用,但它们有几个潜在的问题:
复杂的流量控制:
暂停和恢复会使代码更难理解和调试,尤其是在复杂的场景中。表现:
在某些情况下,暂停和恢复代码可能会带来额外的开销,从而降低效率。限量:
每次调用返回一个值,如果需要一次访问大量数据,则效率可能会很低。兼容性:
生成器是 ecmascript 2015 (es6) 标准的一部分,因此如果没有像 babel 这样的附加工具,较旧的浏览器可能不支持它们。
替代方法
如果生成器引入太多复杂性,您可以考虑替代方案:
带回调的递归函数:
function generateid(callback, start = 1) { callback(start); settimeout(() => generateid(callback, start + 1), 0); }
优点:
更简单的流程控制:虽然使用了递归,但在控制程序流程方面,函数的可读性和清晰性更高。
异步执行:使用settimeout可以实现异步操作,这有助于保持性能。缺点:
递归开销:对于非常大量的迭代,可能会出现递归问题(堆栈溢出)。
循环:
对于较小的数组,生成预定数量的值的简单循环可能是更有效的选择。
function generateids(limit) { const ids = []; for (let i = 1; i <= limit; i++) { ids.push(i); } return ids; } const ids = generateids(100); // generiše prvih 100 id-eva console.log(ids);
优点:
实现简单:这个方案很容易理解,并且没有流量控制的问题。
快速生成:所有值一次性生成,可以以更少的迭代次数提高效率。缺点:
内存消耗:所有值都存储在内存中,这对于大型数组可能会出现问题。
不要偷懒:所有 id 都是预先生成的,如果您不需要全部 id,效率可能会很低。
迭代器:
通过 .next() 方法返回可迭代值的对象,类似于生成器,但具有更多控制权。
function createiditerator() { let i = 1; return { next() { return { value: i++, done: false }; } }; } const iditerator = createiditerator(); console.log(iditerator.next().value); // 1 console.log(iditerator.next().value); // 2 console.log(iditerator.next().value); // 3
优点:
流程控制:与生成器具有类似的功能,但执行更加线性。
更简单的代码:没有yield,这可以使代码更容易理解。缺点:
没有自动暂停:您必须手动管理迭代,这在某些情况下可能会很不方便。
使用 async/await 异步生成
如果 id 是异步生成的,您可以将 async/await 与返回 promise 的函数结合使用。
async function generateID(start = 1) { let i = start; while (true) { await new Promise((resolve) => setTimeout(resolve, 0)); console.log(i++); } } generateID();
优点:
异步执行:高效处理长时间运行的操作,而不阻塞主执行流程。
现代语法:async/await 是一种更现代、更直观的异步代码处理方式。缺点:
不适合同步代码:如果需要同步生成,这个解决方案并不理想。
结论
生成器是处理大量无限数据数组以及需要暂停和恢复进程的应用程序中的流量控制的绝佳工具。然而,它们的复杂性和潜在的性能问题意味着它们应该谨慎使用。根据应用程序的要求,迭代、递归或异步代码等替代解决方案可能更合适。
理论要掌握,实操不能落!以上关于《了解 JavaScript 生成器:强大的代码流控制工具》的详细介绍,大家都掌握了吧!如果想要继续提升自己的能力,那么就来关注golang学习网公众号吧!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
291 收藏
-
282 收藏
-
331 收藏
-
364 收藏
-
415 收藏
-
421 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 507次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习