JS常用的几种数组遍历方法及性能分析对比实例的详细说明

本文介绍了JS常用的几种数组遍历方法及其性能分析和比较。分享给大家参考，如下：

前言

本文属于与前面JS的几个变量交换方法和性能分析比较相同的系列。本文继续分析JS中几种常用的数组遍历方法及其性能比较

起源

上次分析了JS的几种常见变量交换方法及其性能后，觉得这个方法挺好的，于是提取了核心逻辑，打包成模板，打算扩展成系列。本文是系列文章的第二篇，分析和比较JS数组遍历方法

JS数组遍历的几种方式

JS数组遍历基本上是针对，forin，foreach，forof，map等等。以下是本文中使用的几种数组遍历方法及其性能分析和比较

第一个：普通for循环

代码如下：

for(j=0；j arr.lengthJ) {}简单说明：最简单的类型，也是最常用的类型。虽然性能不弱，但仍有优化空间

第二个：循环优化版本

代码如下：

对于(j=0，len=arr.lengthj lenJ) {}简述：使用临时变量缓存长度，避免重复获取数组长度。当阵列较大时，优化效果会很明显。

这个方法基本上是所有循环遍历方法中性能最高的

第三个：弱化版本为循环

代码如下：

for(j=0；arr[j]！=nullJ) {}简述：这个方法其实严格来说属于for循环，但是它没有使用长度判断，而是使用变量本身来判断。

事实上，这种方法的性能远不如普通for循环

第四个：foreach循环

代码如下：

arr.forEach(函数(e){ })；简单说明一下常用的：数组的foreach循环，它的性能其实比普通for循环弱

每个品种的第五个：

代码如下：

array . prototype . foreach . call(arr，function(El){ })；简述：由于foreach自带Array类型，不能直接用于一些非Array类型(比如NodeList)，所以有这个变体。使用这种变体可以使类似的数组具有foreach函数。

实际性能比普通foreach弱

第六个：福林周期

代码如下：

For(j in arr) {}对：循环的简单描述受到了很多人的喜爱，但实际上，经过分析测试，在众多的循环遍历方法中，

它的效率是最低的

第七次：map遍历

代码如下：

arr.map(函数(n){ })；简单说明一下：也是广泛使用的。虽然使用起来很优雅，但实际效率不如foreach

第八个：forof遍历(需要ES6支持)

代码如下：

for(让arr的值){ })；简要说明es6采用：性能优于forin，但仍不如普通FORIN环路

各种遍历方法的性能比较

对上述方法进行了逐一对比分析，结论基本可以：

普通对于循环来说是最优雅的

(PS:以上所有代码都只是空循环，没有回收内部执行代码，只是分析各自循环的时间。)

性能对比截图

分析结果1

下面截图中的数据是在chrome(支持es6)中运行100次后得出的结论(每次运行10次，共10个周期，得出的分析结果)

可以看出福林循环是最慢的。优化后的普通for循环是最快的

分析结果2

以下截图数据是在chrome(支持es6)中运行1000次后得出的结论(每次运行100次，共10个周期，得出的分析结果)

此外，下面的演示可以用来分析和比较JS数组遍历模式

Js中几种常用数组遍历方法的分析比较工具

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》和0103010

希望本文对JavaScript编程有所帮助。