JS几种数组遍历方式

这是从 Lichun Dai 博客中看到的一篇文章，作者对 JS 中的数组遍历方式进行了总结，同时进行了性能对比。但根据评论者的回答，性能分析需要结合具体环境，单纯在浏览器中进行测试是难下结论的，所以我只会展示实现的方式，至于在浏览器中的性能可以点击文末的链接跳转至原作者的分析工具 demo。

第一种：普通 for 循环

1
2
3

for(j = 0; j < arr.length; j++) {
   
}

简要说明：最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

1
2
3

for(j = 0,len=arr.length; j < len; j++) {
   
}

简要说明: 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。 这种方法基本上是所有循环遍历方法中性能最高的一种

1
2
3

for(j = 0; arr\[j\]!=null; j++) {
   
}

简要说明: 这种方法其实严格上也属于 for 循环，只不过是没有使用 length 判断，而使用变量本身判断 实际上，这种方法的性能要远远小于普通 for 循环

1
2
3

arr.forEach(function(e){  
   
});

简要说明: 数组自带的 foreach 循环，使用频率较高，实际上性能比普通 for 循环弱

1
2
3

Array.prototype.forEach.call(arr,function(el){  
   
});

简要说明: 由于 foreach 是 Array 型自带的，对于一些非这种类型的，无法直接使用(如 NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有 foreach 功能。实际性能要比普通 foreach 弱

1
2
3

for(j in arr) {
   
}

简要说明: 这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中 它的效率是最低的

1
2
3

arr.map(function(n){  
   
});

简要说明: 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上 foreach

1
2
3

for(let value of arr) {  
   
});

简要说明: 这种方式是 ES6 里面用到的，性能要好于 forin，但仍然比不上普通 for 循环

普通 for 循环才是最优雅的