如何通过循环优化提升 JavaScript 程序性能？

本文共计1969个文字，预计阅读时间需要8分钟。

前言：对于提高JavaScript程序的性能这个问题，最简单同时也容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将帮助你解决这个难题。

我们将看到，在JavaScript中，主要的性能瓶颈之一就是循环语句的编写。以下是一些关键点，帮助你编写高性能的循环语句：

1. 避免不必要的操作：在循环体内部避免执行与循环逻辑无关的操作，如DOM操作、复杂的函数调用等。

2. 使用合适的循环结构：根据不同的情况选择合适的循环结构。例如，`for`循环在已知迭代次数时通常比`while`循环更高效。

3. 减少循环次数：尽可能减少循环的迭代次数，例如通过提前终止循环。

4. 使用局部变量：在循环中使用局部变量，而不是全局变量，可以减少变量查找的时间。

5. 优化条件判断：将最可能为真的条件判断放在循环的开始，以减少不必要的迭代。

6. 使用`for...of`循环：在处理数组或集合时，使用`for...of`循环通常比传统的`for`循环更简洁且性能更优。

7. 避免在循环中创建对象：在循环中创建大量对象会增加内存分配和垃圾回收的压力。

8. 使用`Map`和`Set`：在需要快速查找和插入的场景中，使用`Map`和`Set`代替数组。

通过遵循上述建议，你可以显著提高JavaScript代码的性能。接下来，我们将进一步探讨这些技巧的具体实现。

前言

对于提高 JavaScript 程序的性能这个问题，最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将会帮你解决这个问题。

我们将看到 JavaScript 中主要的循环类型，以及如何针对它们进行高效编码。

现在开始！

循环性能

谈到循环性能，争论的焦点始终会集中到关于应该使用哪种循环，哪个是速度最快、性能最好的？事实上，在 JavaScript 提供的四种循环类型中，只有一种比其他循环慢得多 ——  for-in 循环。 对循环类型的选择应基于你的需求而不是性能问题。

有两个主要因素有助于改善循环性能 —— 每次迭代完成的工作和迭代次数。

在下面的内容中，我们将会看到通过对这两点的优化，可以对循环的整体性能产生积极的影响。

For 循环

在 ECMA-262（定义JavaScript的基本语法和行为的规范）第三版中，定义了四种循环类型。第一个是标准的 for 循环，它与其他类 C 语言的语法相同：

for (var i = 0; i < 10; i++){ //循环体 }

这可能是最常用的 JavaScript 循环结构。要了解应该怎样对其进行优化，需要先进行一些分析。

解析

for 循环由四部分组成：初始化，预测试条件，循环体和后执行。它的工作方式如下：首先，执行初始化代码（var i = 0;）。然后是预测试条件（i <10;）。如果预测试条件的计算结果为 true，则执行循环体。之后运行后执行代码（i ++）。

优化

要优化循环中的工作量，第一步是最小化对象成员和数组项查找的数量。
还可以通过反转顺序来提高循环的性能。在 JavaScript 中，反转循环对循环的性能提升不大，除非你消除了额外的操作。

// 原始循环 for (var i = 0; i < items.length; i++){ process(items[i]); } // 最小化属性查找 for (var i = 0, len = items.length; i < len; i++){ process(items[i]); } // 最小化属性查找并反序 for (var i = items.length; i--; ){ process(items[i]); }

While 循环

第二种是 while 循环。下面是一个简单的预测试循环，由预测试条件和循环体组成。

var i = 0; while(i < 10){ //循环体 i++; }

解析

如果预测试条件的计算结果为 true，则执行循环体。如果不是 —— 它就会被跳过。每个 while 循环都可以用 for 替换，反之亦然。

优化

// 原始循环 var j = 0; while (j < items.length){ process(items[j++]); } // 最小化属性查找 var j = 0, count = items.length; while (j < count){ process(items[j++]); } // 最小化属性查找和反序 var j = items.length; while (j--){ process(items[j]); }

Do-While 循环

do-while 是第三种循环，它是 JavaScript 中唯一的后测试循环。由循环体和后测试条件组成：

var i = 0; do { //循环体 } while (i++ < 10);

解析

在这种类型的循环中，循环体总是至少执行一次。然后评估测试后的条件，如果它是true，则执行另一个循环周期。

优化

// 原始循环 var k = 0; do { process(items[k++]); } while (k < items.length); // 最小化属性查找 var k = 0, num = items.length; do { process(items[k++]); } while (k < num); // 最小化属性查找和反序 var k = items.length - 1; do { process(items[k]); } while (k--);

For-In 循环

最后一种是 for-in 循环。它有一个非常特殊的用途 —— 枚举 JavaScript 对象的命名属性。 它的语法如下：

for (var prop in object){ //loop body }

解析

它的名称与 for 循环类似。但是工作方式完全不同。而这种差异使它比另外三种循环慢得多，后者具有相同的性能特征，所以争论哪个循环最快是没有用的。

每次循环执行时，变量 prop 会得到 object 的一个属性。它将会不断执行，直到返回所有属性为止。这些是对象自身的以及通过其原型链继承的属性。

注意事项

永远不要用“ for-in ”来迭代数组成员。

这种循环的每次迭代都会在实例或原型上进行属性查找，这使得 for-in 循环比其它循环要慢得多。对于相同次数的迭代，可能会比其它循环慢七倍。

结论

for ， while 和 do-while 循环都有类似的性能特征，因此没有哪种类型比其他的更快或更慢。

避免使用 for-in 循环，除非你需要对大量未知对象属性进行迭代。

提高循环性能的最佳方法是减少每次迭代完成的工作量并减少循环迭代次数。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。