写JS这么多年遍历数组绝对是日常最高频的操作。但我发现很多前端开发者一直有个误区随便写遍历能用就行。大部分人分不清普通for循环、forEach、for-of的性能差异和适用场景甚至觉得它们只是写法不同、效果完全一致。其实不然不同遍历方式的底层机制差异非常大数据量小的时候看不出区别一旦遇到上万、十万级列表渲染、批量处理数据页面卡顿、JS阻塞的问题马上就暴露出来。今天我专门写了一套公平环境实测代码在同等数据量下横向对比三种遍历的性能、优缺点、限制条件最后总结出业务最佳选型方案彻底解决大家的选择困难症。一、先统一测试环境与数据为了保证结果真实有效我统一测试条件创建一个10万条数据的纯数字数组分别使用三种遍历方式做简单累加逻辑每次测试多次取平均值避免单次执行误差。测试环境Chrome 最新版、普通PC开发机、无其他任务占用。// 生成十万条测试数据 const arr []; for(let i 0; i 100000; i){ arr.push(i); } let total 0;二、三种遍历完整实测代码1. 传统普通 for 循环下标循环最原始、最经典的遍历方式也是底层性能天花板。console.time(普通for循环); for(let i 0; i arr.length; i){ total arr[i]; } console.timeEnd(普通for循环);2. Array.prototype.forEachES5推出的迭代方法语法简洁项目中使用频率极高。console.time(forEach遍历); arr.forEach(item { total item; }); console.timeEnd(forEach遍历);3. for-of 遍历ES6新出的遍历语法主打简洁、支持迭代器、兼容所有可迭代对象。console.time(for-of遍历); for(const item of arr){ total item; } console.timeEnd(for-of遍历);三、实测结果出炉真实差距多次测试取平均最终性能排序非常稳定普通for循环 for-of forEach十万级数据大概耗时参考普通for2~4ms性能最强for-of5~8ms性能中等均衡forEach12~18ms性能最差耗时翻倍很多人没想到forEach 性能居然差这么多核心原因我给大家讲透彻。四、为什么性能差距这么大底层原理拆解1. 普通 for 循环最快普通下标for循环是JS引擎最底层支持的遍历没有任何额外封装、没有函数调用开销只是单纯的下标取值、自增判断开销极低所以性能无敌。2. for-of 性能居中for-of 基于迭代器Iterator实现有一层轻微封装开销所以比原生for慢一点。但优势是语法干净、无需下标、不会越界综合体验最好。3. forEach 性能最差重点坑点forEach 本质是高阶函数每次遍历都会执行一次回调函数产生大量函数调用栈开销。数据量越大累积开销越恐怖。而且forEach底层做了参数绑定、异常捕获、参数传递等封装冗余逻辑非常多这也是它性能垫底的根本原因。五、关键语法限制面试业务高频坑1. forEach 无法中断、无法跳出循环这是业务最大的坑forEach 不支持 break、continue想要中断只能抛异常非常鸡肋。// 无效forEach不能break arr.forEach(item { if(item 10) break; })2. for-of 支持 break、continue、awaitfor-of 可以完美支持遍历中断且唯一支持遍历内写await做异步串行遍历非常好用。async function loop(){ for(const item of arr){ await new Promise(resolvesetTimeout(resolve,1)); } }3. 普通for 自由度最高可以自由控制遍历起点、终点、步长适合复杂自定义遍历逻辑。六、业务场景终极选型方案直接照抄看完性能和特性很多人还是不知道怎么选我给大家总结一套项目通用规范1、大数据量、批量处理、追求极致性能 → 优先普通for循环上万条数据遍历、文件解析、批量计算用原生for性能最优避免页面卡顿。2、日常业务遍历、追求代码简洁、需要中断遍历 → 首选 for-of绝大多数日常开发场景for-of 性价比最高性能不错、语法优雅、支持break和await是目前最推荐的通用遍历方案。3、简单遍历、无需中断、数据量很小 → 可用 forEach几十条数据简单遍历、纯消费逻辑可以用forEach图省事但不推荐在大数据、异步场景使用。七、日常开发误区纠正很多团队新人喜欢无脑用 forEach觉得代码短、好看。实际上在工程化项目中forEach 是最不推荐的通用遍历方式。不仅性能差而且不支持中断、不支持异步串行扩展性极差。现在主流大厂规范都是能用 for-of 绝不写 forEach。总结三种遍历没有绝对的最好只有最合适。追求性能用原生for追求均衡优雅用for-of极简小场景偶尔用forEach。弄懂它们的性能差异和底层限制不仅能提升代码质量还能规避很多隐性bug写出更专业、更高效的JS代码。 forEach、for、for‑of 到底选哪个？性能实测对比
写JS这么多年遍历数组绝对是日常最高频的操作。但我发现很多前端开发者一直有个误区随便写遍历能用就行。大部分人分不清普通for循环、forEach、for-of的性能差异和适用场景甚至觉得它们只是写法不同、效果完全一致。其实不然不同遍历方式的底层机制差异非常大数据量小的时候看不出区别一旦遇到上万、十万级列表渲染、批量处理数据页面卡顿、JS阻塞的问题马上就暴露出来。今天我专门写了一套公平环境实测代码在同等数据量下横向对比三种遍历的性能、优缺点、限制条件最后总结出业务最佳选型方案彻底解决大家的选择困难症。一、先统一测试环境与数据为了保证结果真实有效我统一测试条件创建一个10万条数据的纯数字数组分别使用三种遍历方式做简单累加逻辑每次测试多次取平均值避免单次执行误差。测试环境Chrome 最新版、普通PC开发机、无其他任务占用。// 生成十万条测试数据 const arr []; for(let i 0; i 100000; i){ arr.push(i); } let total 0;二、三种遍历完整实测代码1. 传统普通 for 循环下标循环最原始、最经典的遍历方式也是底层性能天花板。console.time(普通for循环); for(let i 0; i arr.length; i){ total arr[i]; } console.timeEnd(普通for循环);2. Array.prototype.forEachES5推出的迭代方法语法简洁项目中使用频率极高。console.time(forEach遍历); arr.forEach(item { total item; }); console.timeEnd(forEach遍历);3. for-of 遍历ES6新出的遍历语法主打简洁、支持迭代器、兼容所有可迭代对象。console.time(for-of遍历); for(const item of arr){ total item; } console.timeEnd(for-of遍历);三、实测结果出炉真实差距多次测试取平均最终性能排序非常稳定普通for循环 for-of forEach十万级数据大概耗时参考普通for2~4ms性能最强for-of5~8ms性能中等均衡forEach12~18ms性能最差耗时翻倍很多人没想到forEach 性能居然差这么多核心原因我给大家讲透彻。四、为什么性能差距这么大底层原理拆解1. 普通 for 循环最快普通下标for循环是JS引擎最底层支持的遍历没有任何额外封装、没有函数调用开销只是单纯的下标取值、自增判断开销极低所以性能无敌。2. for-of 性能居中for-of 基于迭代器Iterator实现有一层轻微封装开销所以比原生for慢一点。但优势是语法干净、无需下标、不会越界综合体验最好。3. forEach 性能最差重点坑点forEach 本质是高阶函数每次遍历都会执行一次回调函数产生大量函数调用栈开销。数据量越大累积开销越恐怖。而且forEach底层做了参数绑定、异常捕获、参数传递等封装冗余逻辑非常多这也是它性能垫底的根本原因。五、关键语法限制面试业务高频坑1. forEach 无法中断、无法跳出循环这是业务最大的坑forEach 不支持 break、continue想要中断只能抛异常非常鸡肋。// 无效forEach不能break arr.forEach(item { if(item 10) break; })2. for-of 支持 break、continue、awaitfor-of 可以完美支持遍历中断且唯一支持遍历内写await做异步串行遍历非常好用。async function loop(){ for(const item of arr){ await new Promise(resolvesetTimeout(resolve,1)); } }3. 普通for 自由度最高可以自由控制遍历起点、终点、步长适合复杂自定义遍历逻辑。六、业务场景终极选型方案直接照抄看完性能和特性很多人还是不知道怎么选我给大家总结一套项目通用规范1、大数据量、批量处理、追求极致性能 → 优先普通for循环上万条数据遍历、文件解析、批量计算用原生for性能最优避免页面卡顿。2、日常业务遍历、追求代码简洁、需要中断遍历 → 首选 for-of绝大多数日常开发场景for-of 性价比最高性能不错、语法优雅、支持break和await是目前最推荐的通用遍历方案。3、简单遍历、无需中断、数据量很小 → 可用 forEach几十条数据简单遍历、纯消费逻辑可以用forEach图省事但不推荐在大数据、异步场景使用。七、日常开发误区纠正很多团队新人喜欢无脑用 forEach觉得代码短、好看。实际上在工程化项目中forEach 是最不推荐的通用遍历方式。不仅性能差而且不支持中断、不支持异步串行扩展性极差。现在主流大厂规范都是能用 for-of 绝不写 forEach。总结三种遍历没有绝对的最好只有最合适。追求性能用原生for追求均衡优雅用for-of极简小场景偶尔用forEach。弄懂它们的性能差异和底层限制不仅能提升代码质量还能规避很多隐性bug写出更专业、更高效的JS代码。