介绍

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

javascript 中的循环类型

1. for 循环
2. while 循环
3. do-while 循环
4. for...in 循环
5. for...of 循环
6. 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 



<h4>
  
  
  while 循环
</h4>



<pre class="brush:php;toolbar:false">console.time('while loop');
let i = 0;
while (i 



<h4>
  
  
  do while 循环
</h4>



<pre class="brush:php;toolbar:false">console.time('do-while loop');
let j = 0;
do {
    array[j] *= 2;
    j++;
} while (j 



<h4>
  
  
  for...in 循环
</h4>



<pre class="brush:php;toolbar:false">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: 50ms
while loop: 55ms
do-while loop: 60ms
for...in loop: 300ms
for...of loop: 70ms
forEach loop: 65ms

观察结果

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

结论

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

最佳实践

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

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

立即学习“Java免费学习笔记（深入）”；

以上就是JavaScript 中循环时间消耗比较的详细内容，更多请关注php中文网其它相关文章！