详解JS中你不知道的各种循环测速

前言

在 JavaScript 中，循环是最常用的控制结构之一。不同类型的循环可能具有不同的性能，有时甚至会对程序的性能产生重大的影响。本文将介绍 JavaScript 中常见的各种循环类型，并通过实例演示其性能差异。

常见循环类型

for 循环

for 循环是 JavaScript 中最常见、最基本也是最容易理解的循环类型。它可以用来迭代数组和对象属性，通过迭代计数器来控制循环次数，如下代码所示：

for (let i = 0; i < arr.length; i++) {
  // 迭代 arr 数组
}

for...in 循环

for...in 循环用于迭代对象中的可枚举属性。该循环将依次迭代对象的每个可枚举属性，直到所有属性都被迭代结束。

for (let key in obj) {
  // 迭代对象 obj 的可枚举属性
}

for...of 循环

for...of 循环是 ES6 中新增的迭代器循环语句，用于迭代可迭代对象（如数组、Set、Map 等对象）。与 for 循环不同，for...of 语句不需要索引或计数器，直接依次取出迭代器返回的值，如下所示：

for (let item of arr) {
  // 迭代 arr 数组
}

forEach 循环

forEach 循环是数组提供的一个迭代器方法，它接受一个函数作为参数，该函数将依次对数组的每个元素执行一次。forEach 循环不能使用 break、continue 关键字停止循环，无法更改数组中的元素。

arr.forEach(function(item, index, array) {
  // 遍历数组 arr，item 是当前元素，index 是元素的索引，array 是数组本身
});

while 循环

while 循环是 JavaScript 中最常见的循环类型之一，它在循环体内部检查条件，只要条件满足，就一直执行循环体代码。

while (condition) {
  // 检查条件，满足则执行循环体代码
}

do...while 循环

do...while 循环与 while 循环类似，但它的循环体至少会被执行一次，然后再检查条件是否满足。

do {
  // 执行循环体代码
} while (condition);

性能测试

为了测试各种循环类型的性能，我们可以编写一个简单的代码片段，用于计算从 1 到 100000 的所有数字之和，如下所示：

// for 循环
let sum1 = 0;
for (let i = 1; i <= 100000; i++) {
  sum1 += i;
}
console.log(sum1);

// for...in 循环
let sum2 = 0;
for (let i in Array.from({ length: 100000 }, (x, i) => i + 1)) {
  sum2 += parseInt(i, 10) + 1;
}
console.log(sum2);

// for...of 循环
let sum3 = 0;
for (let i of Array.from({ length: 100000 }, (x, i) => i + 1)) {
  sum3 += i;
}
console.log(sum3);

// forEach 循环
let sum4 = 0;
let arr = Array.from({ length: 100000 }, (x, i) => i + 1);
arr.forEach((item) => {
  sum4 += item;
});
console.log(sum4);

// while 循环
let sum5 = 0;
let i = 1;
while (i <= 100000) {
  sum5 += i;
  i++;
}
console.log(sum5);

// do...while 循环
let sum6 = 0;
let j = 1;
do {
  sum6 += j;
  j++;
} while (j <= 100000);
console.log(sum6);

运行以上代码片段，我们可以得到各种循环类型的计算时间。在我的测试环境中（Chrome 95，Windows 10），for 循环的性能最好，而 for...in 循环性能最差。通过对多次运行测试得到的结果进行分析，我们可以得到以下结论：

1. 在循环次数较少的情况下，各种循环的性能比较接近，差异不明显。
2. 在循环次数较多的情况下，for 循环的性能优于其他循环类型，而 for...in 循环的性能最差，这是因为 for...in 循环需要获取每个属性的名称，存在一定的性能开销。
3. 在迭代数组时，for 循环和forEach 循环的性能相似。
4. 在需要迭代对象属性时，for...in 循环是最常见且应用广泛的迭代器。

总结

本文介绍了 JavaScript 中常见的各种循环类型，包括 for 循环、for...in 循环、for...of 循环、forEach 循环、while 循环和do...while 循环。而针对各种循环类型，我们通过实例演示了它们性能的差异。在实际开发中，我们应该根据实际情况选择适当的循环类型，以提高代码的性能和可读性。