几种JS数组遍历方式对比及性能分析

我们通常使用JS循环遍历方式来处理数据。数组遍历的方法有很多，比如for、while、forEach、map等，它们的执行效率各不相同。一样的，我们分析比较一下。创建一个有1000w条数据的数组，遍历数组，比较性能：constdata=newArray(1000000).fill(0);(1)遍历普通for循环最简单也是最传统的循环语句，使用频率最高，性能也更好，下面代码计算10次取平均值（下同）。console.time('for');for(leti=0;i{});console.timeEnd('forEach');耗时：191.116ms(5)forEach原型由于forEach自带Array类型，对于一些非this类型是不能直接使用的（比如NodeList），所以才有了这个变体。使用此变体可以使类似的数组具有forEach函数。console.time('forEach');Array.prototype.forEach.call(data,item=>{});console.timeEnd('forEach');耗时：187.169ms（6）map返回一个新数组，array中的元素是原数组元素调用函数处理后的值，map不会改变原数组。console.time('map');data.map(item=>{});console.timeEnd('map');耗时：258.481ms(7)forof允许循环遍历可迭代的数据结构，如数组、字符串、maps、nodelists等，但不能遍历对象。console.time('forof');for(letitemofdata){}console.timeEnd('forof');耗时：247.011ms(8)用于遍历对象除SymbolProperties以外的可枚举项，包括继承的可枚举属性。console.time('forin');for(letkeyindata){}console.timeEnd('forin');耗时：9015.457ms可见forin是效率最差的，因为forin会遍历数组的所有可枚举属性，包括原型。当解释器遇到forin循环时，需要在后台为对象创建一个枚举器，这是一个非常昂贵的操作！