脚本之家在线工具

电脑版
提示:原网页已由神马搜索转码, 内容由tools.jb51.net提供.
更新记录
2018.4.18:在线JS常见遍历方式性能分析比较工具完成上线
  1. 首页
  2. 站长辅助工具
  3. 在线JS常见遍历方式性能分析比较工具

在线JS常见遍历方式性能分析比较工具

这是一款针对常见JS遍历方式进行性能比较的工具，罗列展示了各种常见的for循环、for in循环、for each循环、for map循环等遍历方式，用户自己设置循环次数与每次循环计算数，最终给出各个循环遍历方式的所用时间，并标注出最快与最慢的遍历方式。提供给需要的朋友参考使用。

JS中几种常用数组遍历方式分析比较

注意

循环方式对比是专门对比普通for循环和foreach,以及其它遍历方式在大量运算后的结果

目前对比三大类型,for循环,forin,foreach以及for循环的几种不同运用

可以看到,不同的方式差距较大

同样,目前设置了最大可运行执行阈值,大于某个数后,执行耗时较长的就会自动隐藏

其中,forin大于100就会隐藏,map大于500就会隐藏

需要注意的是,for of由于是es6中才能使用,所以代码中默认注释掉了

性能测试结果中耗时最短的部分用绿色标注，耗时最多的用粉红色标注，便于读者观察

当前分析模式:
每次计算次数:
一共执行循环:
测试环境:Linux    浏览器信息:undefined
代码前提: 
                            
                                var arr = [0,'1',2,'3',...,'99999',100000];
测试代码
性能分析
for循环执行代码
第一种方式
    

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

  2.    
    3. 

  3. }
    4.
等待执行
for循环执行代码
第二种方式
    

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

  2.    
    3. 

  3. }
    4.
等待执行
for循环执行代码
第三种方式
    

  1. for(j = 0; arr[j]!=null; j++) {
    2. 

  2.    
    3. 

  3. }
    4.
等待执行
for in循环执行代码
    

  1. for(j in arr) {
    2. 

  2.    
    3. 

  3. }
    4.
等待执行
for each循环执行代码
    

  1. arr.forEach(function(e){  
    2. 

  2.    
    3. 

  3. });
    4.
等待执行
for each循环执行代码,第二种方式
    

  1. Array.prototype.forEach.call(arr,function(el){  
    2. 

  2.    
    3. 

  3. });
    4.
等待执行
for map循环执行代码
    

  1. arr.map(function(n){  
    2. 

  2.    
    3. 

  3. });
    4.
等待执行

系列相关文章:

补充说明：

① 该工具摘自戴荔春的个人博客：https://dailc.github.io/about/about.html

② 本站所提供工具仅做参考借鉴，用户在编程开发过程中需要根据具体场景选择合适的方法

脚本之家工具类小程序上线了！微信小程序搜索 脚本之家工具箱或者扫描如下小程序码直接打开小程序！

小程序工具箱仍在不断改进完善中，欢迎提出宝贵意见！

为回馈广大用户对脚本之家的关注，脚本之家不定期开展红包、图书、礼品大放送活动

关注官方微信公众平台即可参与活动！

最后，感谢您对脚本之家在线工具的支持！