详解JavaScript中哪一种循环最快

明确哪种 for 循环或迭代器最契合实际需求，能有效避免在应用性能上出现低级错误。

JavaScript 在 Web 开发领域地位稳固，无论是 Node.js、React、Angular、Vue 等框架，还是原生 JavaScript，都拥有庞大的用户群体。现代 JavaScript 提供了多种迭代或循环值的方法，但关键在于我们是否清楚哪种循环最适合当前场景。for 循环存在多种变体，包括普通 for、倒序 for、for...of、forEach、for...in 以及 for...await，本文将逐一探讨这些方式。

究竟哪一种循环更快？

答案是：倒序 for 循环。

令我惊讶的是，在本地计算机测试后，不得不承认倒序 for 循环是所有 for 循环变体中执行速度最快的。以下示例展示了对包含超过一百万个元素的数组进行遍历的情况。 声明：console.time() 的测量结果准确度高度依赖于运行测试的系统配置，具体细节可参考相关文档说明。

const million = 1000000; 
const arr = Array(million);

// 注：这是稀疏数组，应该为其指定内容，否则不同方式的循环对其的处理方式会不同：
// const arr = [...Array(million)]

console.time('⏳');
for (let i = arr.length; i > 0; i--) {} // for(倒序) :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for     :- 1.6ms
arr.forEach(v => v)           // foreach   :- 2.1ms
for (const v of arr) {}         // for...of   :- 11.7ms
console.timeEnd('⏳');

造成这一结果的原因很直接：正序和倒序 for 循环的时间差异极小，仅约 0.1 毫秒。这是因为倒序 for 只需计算一次初始变量 let i = arr.length，而正序 for 在每次变量递增后都要检查条件 i<arr.length。这一细微差别在数据量较小或对时间不敏感的场景下可以忽略；但根据测试，当数据量达到十亿、千亿级别时，时间差距显著放大，此时必须考虑其对应用性能的影响。 此外，forEach 是 Array 原型上的方法，与普通 for 循环相比，forEach 和 for...of 在数组迭代上耗时更多。 （译者注：值得注意的是，for...of 和 forEach 均从对象中获取数据，而原型方法并非如此，因此二者直接对比可能存在偏差。）

循环的类型及适用场景

1. For 循环（正序与倒序）

想必大家对这一基础循环并不陌生。for 循环可在任何需要按指定次数执行代码的地方使用。既然最基础的 for 循环运行速度最快，是否意味着我们应该在所有场景下都使用它？并非如此。性能并非唯一考量标准，代码的可读性往往更为重要。因此，选择最适合应用程序的循环变体才是关键。

2. forEach

该方法接收一个回调函数作为参数，遍历数组的每个元素并执行该回调函数（将元素本身及其可选索引作为参数传递给回调函数）。forEach 还允许在回调函数中使用可选的 this 参数。

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
  console.log(`${item} - ${index}`);
}
things.foreach(callbackFun); 
/* 输出  have - 0
    fun - 1
    coding - 2 */

需要注意的是，若使用 forEach，无法利用 JavaScript 的短路运算符来在每次循环中跳过或提前结束循环。

3. for…of

for...of 在 ES6（ECMAScript 6）中标准化。它用于遍历可迭代对象（如 array、map、set、string 等），其显著优点是具备优秀的可读性。

const arr = [3, 5, 7];
const str = 'hello';
for (let i of arr) {
  console.log(i); // 输出 3, 5, 7
}
for (let i of str) {
  console.log(i); // 输出 'h', 'e', 'l', 'l', 'o'
}

需注意，请勿在生成器中使用 for...of，即使循环提前终止。退出循环后，生成器会被关闭，若尝试再次迭代，将不会产生任何后续结果。

4. for in

for...in 会遍历对象的所有可枚举属性。对于每个不同属性，for...in 语句除了返回数字索引外，还会返回用户定义的属性名称。

因此，在遍历数组时，最好使用带有数字索引的传统 for 循环。因为 for...in 语句还会迭代数组元素之外的用户定义属性，即使我们修改了数组对象（例如添加自定义属性或方法），情况依然如此。

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';
for (let i in details) {
  fullName += details[i] + ' '; // fullName: john doe
}

for…of 与 for…in 的区别

for...of 和 for...in 的主要区别在于它们迭代的内容。for...in 循环遍历对象的属性，而 for...of 循环遍历可迭代对象的值。

let arr= [4, 5, 6];
for (let i in arr) {
  console.log(i); // '0', '1', '2'
}
for (let i of arr) {
  console.log(i); // '4', '5', '6'
}

结论

• for 最快，但可读性较差
• foreach 速度较快，且能控制内容
• for...of 速度较慢，但体验良好
• for...in 速度较慢，使用不够便捷

最后，给出一条明智的建议：优先保证代码可读性。特别是在开发复杂结构程序时，这一点尤为重要。当然，我们也应关注性能，尽量避免引入不必要的、冗余的花哨代码，因为这有时可能对程序性能造成严重影响。祝编码愉快。

译者注

在译者的实际测试中发现：

• 不同浏览器甚至不同版本，测试结果会有所差异（结果可能颠倒，例如 Firefox 对原生 for-loop 似乎不太友好，而 Safari 极度偏好 while 循环）
• 不同平台操作系统及处理器，测试结果也会存在差异

到此这篇关于详解JavaScript中哪一种循环最快呢的文章就介绍到这了，更多相关JavaScript哪一种循环最内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

原文地址：Which type of loop is fastest in JavaScript? 原文作者：kushsavani