JavaScript 中循环时间消耗比较

javascript 中循环时间消耗比较

介绍

循环是 javascript 中的基本结构,可以重复执行代码块。然而,不同类型的循环可能表现出不同的性能特征。了解这些差异可以帮助开发人员编写更高效的代码。本文通过实际例子比较了 javascript 中各种循环结构的时间消耗。

javascript 中的循环类型

for 循环while 循环do-while 循环for…in 循环for…of 循环array.foreach 方法

测量环路性能

为了比较不同循环的性能,我们将使用 console.time 和 console.timeend 方法,这使我们能够准确地测量代码块的执行时间。

设置示例

我们将使用一个包含 1,000,000 个数字的数组来执行循环操作,并测量每种循环类型处理该数组所需的时间。

const array = array.from({ length: 1000000 }, (_, i) => i);

登录后复制

性能比较示例

for循环

console.time('for loop');for (let i = 0; i < array.length; i++) {    array[i] *= 2;}console.timeend('for loop');

登录后复制

while 循环

console.time('while loop');let i = 0;while (i < array.length) {    array[i] *= 2;    i++;}console.timeend('while loop');

登录后复制

do while 循环

console.time('do-while loop');let j = 0;do {    array[j] *= 2;    j++;} while (j < array.length);console.timeend('do-while loop');

登录后复制

for…in 循环

console.time('for...in loop');for (let index in array) {    array[index] *= 2;}console.timeend('for...in loop');

登录后复制

for…of 循环

console.time('for...of loop');for (let value of array) {    value *= 2;}console.timeend('for...of loop');

登录后复制

array.foreach 方法

console.time('foreach loop');array.foreach((value, index) => {    array[index] *= 2;});console.timeend('foreach loop');

登录后复制

结果与分析

运行上述代码片段后,您将得到类似以下内容的控制台输出:

for loop: 50mswhile loop: 55msdo-while loop: 60msfor...in loop: 300msfor...of loop: 70msforEach loop: 65ms

登录后复制

观察结果

for 循环:由于其简单性和最小的开销,该循环通常提供最佳性能。while 循环:比 for 循环稍慢,主要是因为单独递增循环变量的开销。do-while 循环:与 while 循环类似,但保证至少迭代一次,导致开销稍多。for…in loop:与数组一起使用时速度明显慢,因为它是为迭代对象属性而不是数字索引而设计的。for…of 循环:提供良好的性能,并且对于迭代数组元素更具可读性。array.foreach 方法:虽然更具可读性和简洁性,但由于回调函数调用的开销,它通常比传统循环慢。

结论

在 javascript 中,不同的循环有不同的性能特征。对于数组迭代,for 循环和 while 循环通常是最快的,而 for…in 循环是最慢的。 for…of 循环和 array.foreach 方法在可读性和性能之间提供了良好的平衡。了解这些差异可以帮助开发人员为其特定用例选择最合适的循环结构,确保其应用程序的最佳性能。

最佳实践

使用 for 循环以获得数组的最大性能.使用 for…of 循环以最小的性能权衡获得更好的可读性.由于性能不佳,请避免对数组使用 for…in 循环.使用 array.foreach 来获得简洁易读的代码,特别是当性能不是关键问题时.

通过应用这些见解,开发人员可以编写更高效且可维护的 javascript 代码。

立即学习“Java免费学习笔记(深入)”;

以上就是JavaScript 中循环时间消耗比较的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2673116.html

(0)
上一篇 2025年3月7日 13:36:39
下一篇 2025年3月7日 13:36:51

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 2 月 5 日之前推出 MCA 或 SAAS 产品

    嘿那里…我知道我对你们来说是新的…… 我认为我的人生正在冒很大的风险……2024 年,我以 8.21 CGPA 的成绩毕业了计算机科学学位。但重要的是……这个 cgpa 无论如何都不会帮助我……在这个学位期间,我偷偷地与网络开发…

    2025年3月7日
    000
  • Nextjs 服务器操作安全吗?

    next.js 服务器操作安全吗? next.js 是一个流行的 react 框架,在其最新版本中引入了服务器操作,允许开发人员直接在其组件中处理服务器端逻辑。此功能可以通过减少对单独 api 路由的需求来简化开发。然而,与任何新功能一样,…

    2025年3月7日
    200
  • 了解和防止 JavaScript 中的跨站请求伪造 (CSRF)

    介绍 在不断发展的 web 安全领域,跨站请求伪造 (csrf) 仍然是开发人员必须解决的重大威胁,以确保 web 应用程序的完整性和安全性。在这篇博文中,我们将深入探讨什么是 csrf、它如何影响您的应用程序,并提供实用的解决方案来防止使…

    2025年3月7日
    200
  • 适合初学者的 JavaScript 循环:学习基础知识

    这是一个阴沉的星期一,而你正在工作。我们都知道周一有多令人沮丧,对吧?你的老板走近你并说:“嘿,我周末收到了 300 封未打开的电子邮件。我希望你打开每一封,记下发件人的姓名,然后在完成后删除这些电子邮件。” 如果你尝试手动完成这个任务,看…

    2025年3月7日
    200
  • 初级:使用 React Router 进行路由

    路由是构建现代 web 应用程序的关键部分。 react router 是一个功能强大的库,可让您有效地处理 react 应用程序中的路由。本指南将帮助您了解 react router 的基础知识,包括设置它、使用基本组件以及探索高级路由技…

    2025年3月7日
    200
  • 高级:使用 React Router 进行路由

    作为一名高级开发人员,全面了解 react 应用程序中的路由至关重要。 react router 提供了一个强大的解决方案,用于根据 url 路径管理组件的导航和渲染。本指南涵盖了 react router 的设置、基本组件以及嵌套路由、动…

    2025年3月7日
    200
  • 部署 React 应用程序:GitHub 页面使用指南

    许多开发者发现部署react应用程序很困难,尤其是那些不熟悉生态系统的开发者。您可以使用 github pages 免费轻松托管静态网页,包括 react 应用程序。借助这个详细的教程,将您的 react 应用程序部署到 github pa…

    2025年3月7日
    200
  • 架构师级别:使用 React Router 进行路由

    作为架构师级开发人员,掌握 react router 对于在 react 应用程序中设计可扩展、可维护且高效的导航系统至关重要。本指南深入介绍如何利用 route、switch、link 和 navlink 等核心组件设置 react ro…

    2025年3月7日
    200
  • 常用的 Javascript 数组方法

    在这篇文章中,我们将了解常用的 Javascript 数组方法,这些方法使用迭代和回调函数来实现其功能。 迭代是指重复执行一组语句或代码块,这使得我们可以多次执行相同的操作。 简单来说,回调是作为参数传递给另一个函数的函数定义。 为了简单起…

    2025年3月7日
    200
  • 实习生级别:使用 React Router 进行路由

    路由是构建现代 web 应用程序的一个关键方面。 react router 是一个功能强大的库,允许您在 react 应用程序中处理路由。本指南将向您介绍 react router,涵盖基本设置和使用,以及高级路由技术和路由防护。 reac…

    2025年3月7日
    200

发表回复

登录后才能评论