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');

结果与分析

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

美间AI 美间AI

美间AI:让设计更简单

美间AI 45 查看详情 美间AI

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 中循环时间消耗比较的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月8日 07:21:05
下一篇 2025年11月8日 07:22:02

相关推荐

  • JavaScript中的空值合并运算符有哪些使用技巧?

    空值合并运算符(??)用于安全处理 null 和 undefined,仅在左侧为 null 或 undefined 时返回右侧默认值。1. 可安全设置默认值,保留 0、false、空字符串等有意义的假值,如 const count = userInput ?? 10;2. 避免与 falsy 值混淆…

    2025年12月5日
    100
  • 如何用 CSS 实现固定宽度容器中元素的动态排列?

    css 布局排版问题的解决 在 css 布局中,需要根据不同的元素内容和位置进行调整。当需要在固定宽度容器中动态展现多个元素时,可能会遇到排版问题。 问题描述 如下图所示,需要在固定宽度的容器中排列一定数量的元素。这些元素的展示与隐藏可能根据其他元素的状态而定。当元素数量为偶数时,需要将其排列为每行…

    2025年12月3日 web前端
    000
  • 如何让子元素高度自动跟随父元素滚动内容长度?

    如何让子元素按照父元素滚动内容的长度自动设置高度? 在 html 和 css 中,我们可以使用定位属性来控制元素的位置和大小。当我们需要让一个子元素的绝对高度跟随着其父元素的滚动内容长度时,可以使用以下方法: 解决方案: 我们可以给父元素添加 overflow: auto; 属性,使其产生滚动条。然…

    2025年12月3日 web前端
    100
  • Bootstrap 表格中如何实现列对齐不一致?

    表格设计中的对齐问题 使用 Bootstrap 框架创建表格时,有时会遇到列对齐不一致的问题。例如,将最后两列向右对齐,以下方法可以解决此问题: 科威旅游管理系统源码 系统前端采用可视化布局,能自动适应不同尺寸屏幕,一起建站,不同设备使用,免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式,让…

    2025年12月3日 web前端
    100
  • 块级元素背景色不完整?如何解决父容器溢出滚动导致子元素背景显示不全的问题?

    块级元素设置背景色不完整? 在HTML中,当父元素设置了固定宽高并启用溢出滚动,而子元素(块级元素)设置了背景色时,隐藏的初始部分可能没有背景色。 解决此问题: 无涯·问知 无涯·问知,是一款基于星环大模型底座,结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品 153 …

    2025年12月3日 web前端
    000
  • 如何让两个子 div 在母 div 中重叠并居中?

    如何让 div 中的两个子 div 重叠并在母 div 中居中? 需要在两个子 div 中的一个后面叠放另一个,同时保持它们在母 div 中水平或垂直居中,而不会影响母 div 的外观或超出母 div 的边界。 css 实现 将母 div 定位为相对定位(position: relative)。将子…

    2025年12月3日 web前端
    000
  • 如何使用 CSS 将 HTML 表格中的特定列右对齐?

    表格对齐问题:如何将表格中的特定列右对齐? 在 html 表格中,您可以使用 css 样式来控制内容对齐方式。在这种情况下,要将最后两列向右对齐,可以使用以下步骤: 确保表格为 100% 宽度。这将允许表格占用可用空间的全部宽度。设置需要右对齐的列为固定宽度。这将为列分配一个指定宽度,确保内容始终在…

    2025年12月3日 web前端
    000
  • 如何实现容器内元素按比例和间距平均分布?

    css 容器布局问题? 在询问如何实现按指定比例和间距在容器中平均显示元素之前,文章简要概述了遇到的问题和所需的效果。 问题描述 如何实现一个随父容器宽度自适应的高度自适应容器,其中嵌套的元素宽度百分比固定,间距也固定,且在不同宽度下保持平均分布? 问题解答 以25%的宽度和1rem的间距为例,问题…

    2025年12月3日 web前端
    100
  • 如何使用 HTML 代码实现表格特定列的右对齐?

    表格对齐问题 在编写 html 表格时,有时需要让某些列向右对齐,以呈现更加整齐美观的视觉效果。 例如,以下代码是一个简单的表格: # first last handle 1 mark otto @mdo 2 jacob thornton @fat 3 larry the bird @twitter…

    2025年12月3日 web前端
    000
  • 如何在 Div 容器内使两个重叠的子 Div 居中对齐?

    如何在 div 中保持两个 div 居中并重叠 在同一个 div 容器内拥有两个子 div,要求它们对齐并且重叠。虽然问题描述中提到了“重叠”,但需要澄清一下,是指小 div 位于大 div 之上。 为了实现此效果,我们可以使用 css 定位。首先,为父 div 设置红色边框并使其居中: .box …

    2025年12月3日 web前端
    100
  • 如何为子元素应用背景色,同时忽略隐藏部分?

    如何为子元素应用背景色而忽略隐藏部分 你想要为父元素设置固定宽高,启用滚动条,并为子元素设置背景色。但是超出隐藏的部分没有背景色。 问题分析 一开始,你使用了 块级元素,导致其具有固定的 width:100% 宽度。当内容超出父元素的宽度时,连续字母和数字会超出 son 元素的宽度。 解决方案 Wo…

    2025年12月3日 web前端
    200
  • 如何使用前端技术实现透明盖章效果?

    前端实现盖章效果 问题: 如何使用前端技术实现盖章效果?要求将客户提供的两张图片合并,其中一张为盖章,并且盖章的背景需要变成透明。 解答: 立即学习“前端免费学习笔记(深入)”; 可以使用混合模式(mix-blend-mode)实现盖章效果。 混合模式是 css 中的一种属性,可控制图像元素之间的混…

    2025年12月3日 web前端
    000
  • 如何解决 SCSS 错误:使用 “ 时无法传递 CSS 变量?

    如何解决这个 scss 错误? 当你使用 时,你可能会遇到一个 scss 错误。这是因为 是 scss 的内置函数,它不能使用 css 变量作为参数。 为了解决此问题,你需要直接将 css 变量 –el-color-white 的颜色值分配给 scss 变量 $vxe-primary-c…

    2025年12月3日 web前端
    000
  • 父元素滚动时,子元素背景色被隐藏怎么办?

    父元素滚动覆盖子元素背景色 在网页布局中,如果父元素设置为固定宽高并启用滚动,而子元素又设置了背景色,可能会遇到这样的问题:子元素被隐藏的部分无法显示背景色。 问题重现 以下是导致问题的代码示例: .parent { width: 100px; padding-left: 10px; overflo…

    2025年12月3日 web前端
    000
  • 如何利用混合模式实现前端盖章效果?

    前端盖章效果的实现 想要实现盖章效果,首先需要解决透明背景的问题。我们可以使用混合模式来实现。 混合模式 混合模式是一种css属性,用于控制元素如何与下面的元素混合。在盖章效果中,我们可以使用multiply混合模式,它将上面的元素与下面的元素相乘,从而创建一种叠加效果。 css 代码 立即学习“前…

    2025年12月3日 web前端
    000
  • 如何解决渐变刻度带来的锯齿问题?

    锯齿问题:渐变刻度产生的锯齿影响美观。 去除锯齿方法: CSS 抗锯齿: CSS 抗锯齿需要在背景色和主色之间添加一层透明渐变。调整渐变的透明度和过渡角度可以改善抗锯齿效果。 抗锯齿图片替代: 吐槽大师 吐槽大师(Roast Master) – 终极 AI 吐槽生成器,适用于 Insta…

    2025年12月3日 web前端
    100
  • 如何实现 CSS 容器中均匀分布的瀑布式布局并保持间距一致性?

    如何解决 css 容器布局问题? 如您所见,在指定百分比宽度和间距时,容器布局可能会超出界限。 使用 calc 计算宽度 要解决此问题,可以使用 calc 函数计算项目宽度,使其适应容器和间距的变化。公式如下: 立即学习“前端免费学习笔记(深入)”; 项目宽度 = (容器宽度 – 间距 * (项目数…

    2025年12月3日 web前端
    100
  • 如何让子元素absolute根据父元素滚动内容的高度设置高度?

    子元素absolute根据父元素滚动内容的高度设置高度 为了让子元素absolute根据父元素滚动内容的高度设置高度,需要对父元素进行一些调整: 包裹滚动内容: 为滚动内容创建一个新的 div 元素,并将其定位为相对于父元素。这个新 div 设置 position: relative,使内容能够在其…

    2025年12月3日 web前端
    000
  • 如何让 div 的大小根据内部内容自动调整?

    如何使 div 大小随内部内容自适应 当一个 div 包含多个子 div 时,我们可能希望子 div 的大小根据其内容而自动调整,而无需显式设置宽高。然而,使用 display: inline-block 或 display: block 可能会带来一些问题,例如换行或填充空间。 为了解决这些问题,…

    2025年12月3日 web前端
    000
  • 如何让包含多种子元素的 DIV 自适应其内容大小?

    自适应尺寸的 div 一个包含多种子元素的 div 可能需要自适应大小以适应其内容。实现这一目标的关键在于避免显式指定子元素的尺寸。 原始解决方案的局限性 使用 inline-block 和 auto 宽度/高度值为子元素设置大小是一种常见方法。虽然它自适应内容,但它会导致连续元素不换行。而bloc…

    2025年12月3日 web前端
    100

发表回复

登录后才能评论
关注微信