前言：

数组遍历有很多种方法，虽然不同方法有不同的特性及适用环境，除了普通飞for循环之外，for...in能直接输出数组元素的索引，for...of能直接输出数组元素的值，map则可以直接生成新的数组，forEach则可以遍历修改元祖元素的值。那么这些方法在性能上相比怎么样呢？

验证：

为了验证这个问题，构造了一个10000条数据的数组，然后使用不同的方法对数组进行遍历输出，通过每种方法遍历前后的时间戳来计算每种方法执行耗费的时间，整理如下：

如上，使用谷歌浏览器进行了10次实验，得出每种方法的执行时间（ms)，其中优化版for循环是使用临时变量，将长度缓存起来，避免重复获取数组长度。

大致可以看出性能最优的要数优化版的for循环了，其次是for...of和for...in循环，最差的集中在forEach循环，其次是map遍历，普通的for循环则处于中间。

验证代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <script>

             //构造数组

             var arr = [];

             for(let i = 0; i < 10000; i++) {

                 arr[i] = {

                     detailImgUrl: "https: //ss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/skin/71.jpg?2"

                 }

             }

             //console.log(arr)

             //数组遍历验证

             const {log} = console;

             var newArr = []

             //方法1 普通for循环

             let time = new Date().getTime();

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

                 document.write(arr[i].detailImgUrl)

             }

             let time1 = new Date().getTime()

             log(time1 - time, "普通for循环")

             newArr.push(time1 - time)

             //方法2 优化版for循环

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

                 document.write(arr[j].detailImgUrl)

             }

             let time2 = new Date().getTime()

             log(time2 - time1, "优化版for循环")

             newArr.push(time2 - time1)

             //方法3 forEach循环

             arr.forEach(item => {

                 document.write(item.detailImgUrl)

             })

             let time3 = new Date().getTime()

             log(time3 - time2, "forEach循环")

             newArr.push(time3 - time2)

             //方法4 for in循环

             for(k in arr) {

                 document.write(arr[k].detailImgUrl)

             }

             let time4 = new Date().getTime()

             log(time4 - time3, "for in循环")

             newArr.push(time4 - time3)

             //方法5 for of循环

             for(k of arr) {

                 document.write(k.detailImgUrl)

             }

             let time5 = new Date().getTime()

             log(time5 - time4, "for of循环")

             newArr.push(time5 - time4)

             //方法6 map遍历

             arr.map(v => {

                 document.write(v.detailImgUrl)

             })

             let time6 = new Date().getTime()

             log(time6 - time5, "map遍历")

             newArr.push(time6 - time6)

             newArr.forEach(value => {

                 document.write("<p>" + value + "</p>")

             })

         </script>

     </body>

 </html>

注意事项：

1.为了增加实验的复杂度，以对象作为数组元素，且以比较长的字符串作为对象的一个元素，使用各种数组遍历方法去遍历对象元素的子元素;

2.为了更真实的反应各种遍历方法的性能，建议数组长度在1000以上，实验次数在10次以上，这样才能得出更真实的对比结果;

3.测试数据比较大，可以先用普通的for循环生成数组，然后直接使用数组进行实验；

总结：

对于前边的实验结果，也只有数据量比较大的情况下才会比较明显。通常情况下前端一次处理的数组也就几十条，将各结果按比例折算，最差的也就10.89ms，最好的8.08ms,相差了2~3ms左右，这个几乎可以忽略不计了。所以说非大数据的情况下如果对性能要求不是太严格就不用太纠结了，根据自己的习惯使用就好。当然追求性能的同学可以在实际开发中选择性能比较好的方法进行使用。

javascript数组遍历的几种常用方法性能分析对比的更多相关文章

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

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

  2. C++ 数组遍历的两种方式

    C++ 数组遍历的两种方式: #include <iostream> using namespace std; int main() { // 一维数组 ] = {, , , , }; / ...

  3. JS几种变量交换方式以及性能分析对比

    前言 "两个变量之间的值得交换",这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要是列举几种常用的方案,进行大量计算并分析对比. 起由 最近做某个项目时,其中有一个需求是 ...

  4. 背景建模技术（二）：BgsLibrary的框架、背景建模的37种算法性能分析、背景建模技术的挑战

    背景建模技术(二):BgsLibrary的框架.背景建模的37种算法性能分析.背景建模技术的挑战 1.基于MFC的BgsLibrary软件下载 下载地址:http://download.csdn.ne ...

  5. JavaScript数组中的22个常用方法

    数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍. ...

  6. 关于javascript数组的定义与其一些常用方法总结

    由于JavaScript是一门宽松的语言,这种宽松可能会带来更加麻烦的事情.比如JavaScript的数组,定义与使用的方式太灵活有时候让人迷惑.下面将JavaScript中关于数组常用的方法.定义之 ...

  7. JavaScript数组去重的几种方法

    这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...

  8. php中的数组遍历的几种方式

    [(重点)数组循环遍历的四种方式]   1.使用for循环遍历数组     conut($arr);用于统计数组元素的个数.     for循环只能用于遍历,纯索引数组!!!!     如果存在关联数 ...

  9. JavaScript 数组遍历方法的对比

    JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 ,,,] , len ...

随机推荐

  1. 通过request获取服务器相对路径及绝对路径

    一. String scheme = request.getScheme();//http String serverName = request.getServerName();//localhos ...

  2. Java Excel报表导出Demo

    /** * 一级权限数据导出 * @return */ @RequestMapping(value = "/getExportData", method = RequestMeth ...

  3. js 判断浏览器是pc端还是移动端

    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { //说明是移动端 } else { //说明是pc端 }

  4. CentOS7源码安装Redis5.0.4非关系型数据库

    源码安装redis-5.0.4 一. 下载redis 1. 需要连接网络 二. 案例(另一种安装方法) [root@localhost ~]# wget http://download.redis.i ...

  5. 日常bug(1)

    今天在写写代码的时候,前端找我,说我写的一个接口有可能有问题.导致前端的数据不能正常显示,我去看了一下,确实不能正常显示.问题的原因是本来前端循环遍历一个json里的数组,但是接下来的数据变成对象了. ...

  6. 记录第n次网站渗透经历

    如标题所示,第x次实战获取webshell的经历是非常美好且需要记录的(毕竟开始写博客了嘛).这能够证明这一路来的学习没有白费,也应用上了该用的知识. 首先怎么说呢,某天去补天看了看漏洞,发现有一个网 ...

  7. keepalived日志显示脚本能执行成功，但是amoeba程序没启动起来，单独执行脚本amoeba能启动成功，放到keepalived里面启动不起来

    keepalived日志如图: 解决:keepalived还有crontab等计划任务自动执行脚本,并不会有本地用户的环境变量,需要在脚本里面加 . /etc/profile  引入本地用户的环境变量

  8. Spring Cloud Eureka注册中心(快速搭建)

    Spring Cloud 详解Eureka注册中心@(微服务)[java|spring-cloud|eureka] Eureka 注册中心是入门Spring Cloud微服务架构的必学组件,是学习所有 ...

  9. 【python】Requests的三种参数请求方式

    URL参数请求: import requests ''' URL Parameters 请求方式: URL参数 例如: 以get 方式请求http://httpbin.org/get?first_na ...

  10. 【Selenium-WebDriver实战篇】ScreenRecorder的实际输出路径设置（转）

    参考:https://www.cnblogs.com/yongfeiuall/p/4134139.html 我们可以用以下方式在Selenium Webdriver中capture video. 基本 ...