JavaScript 中循环时间消耗比较

在 JavaScript 中，循环结构的选择对代码性能有显著影响。以下是不同循环类型的时间消耗比较及优化建议：

使用 console.time() 和 console.timeEnd() 测量循环执行时间，测试数组为包含 1,000,000 个数字的数组（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'); // 约 50ms

  性能最优：直接操作索引，无额外开销，适合高性能场景。

• while 循环

  console.time('while loop');let i = 0; while (i < array.length) { array[i] *= 2; i++; }console.timeEnd('while loop'); // 约 55ms

  略慢于 for 循环：需手动管理索引变量，但差异微小。

• do-while 循环

  console.time('do-while loop');let j = 0; do { array[j] *= 2; j++; } while (j < array.length);console.timeEnd('do-while loop'); // 约 60ms

  保证至少执行一次，但性能略低，通常不推荐用于简单迭代。

• for...in 循环

  console.time('for...in loop');for (let index in array) { array[index] *= 2; }console.timeEnd('for...in loop'); // 约 300ms

  性能最差：设计用于对象属性枚举，会遍历原型链，不适用于数组。

• for...of 循环

  console.time('for...of loop');for (let value of array) { value *= 2; } // 注意：此处未修改原数组！console.timeEnd('for...of loop'); // 约 70ms

  注意：直接操作 value 不会修改原数组（需通过索引或 array[i] 修改）。性能中等，可读性好。

• array.forEach 方法

  console.time('forEach loop');array.forEach((value, index) => { array[index] *= 2; });console.timeEnd('forEach loop'); // 约 65ms

  回调函数带来额外开销，但代码简洁，适合非性能敏感场景。

• 传统循环（for/while）：直接操作索引，无函数调用或属性查找开销。
• for...in：需检查对象属性（包括原型链），且数组优化较少。
• for...of/forEach：依赖迭代器或回调函数，增加执行时间。

• 追求性能时：优先使用 for 循环，尤其是处理大型数组。
• 平衡可读性与性能：选择 for...of 或 forEach，但需注意：

  for...of 需通过索引修改数组（如 for (const [index, value] of array.entries())）。

  forEach 无法使用 break/continue，且回调内异步操作可能导致意外行为。

• 避免场景：

  禁止对数组使用 for...in（可能遍历非数字属性）。

  避免在嵌套循环或高频调用中使用高开销循环（如 forEach）。

• 缓存数组长度：for (let i = 0, len = array.length; i < len; i++) { ... }减少每次循环的属性访问开销（现代引擎可能自动优化）。
• 选择合适的数据结构：如需频繁增删元素，考虑 Map/Set 而非数组。

根据场景权衡性能与可读性：

• 性能关键路径：for 循环。
• 代码简洁性：for...of 或 forEach（明确性能影响后使用）。
• 避免误用：for...in 用于数组是反模式。

通过合理选择循环结构，可以显著提升 JavaScript 代码的执行效率。