前言：

数组遍历有很多种方法，虽然不同方法有不同的特性及适用环境，除了普通飞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. MySQL Replication--中继日志更新

    RELAY LOG相关参数 设置如何保存从节点接收到的主库BINLOG sync_relay_log : 设置如何同步中继日志到中继日志文件. 当sync_relay_log = 0时,则MySQL服 ...

  2. 18道kafka高频面试题哪些你还不会？（含答案和思维导图）

    前言 Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实时的处 ...

  3. 服务器部署docker lnmp环境

    一.安装dockerDocker要求运行在Centos 7上,要求系统为64位,系统内核版本3.10以上 1.uname -an 查看当前系统版本 2.yum -y install docker 下载 ...

  4. Linux一些服务的启动命令

    http:服务service httpd start 启动 service httpd restart 重新启动 service httpd stop 停止服务 启动ssh服务 # /etc/init ...

  5. ACAG 0x01-4 最短Hamilton路径

    ACAG 0x01-4 最短Hamilton路径 论为什么书上标程跑不过这道题-- 首先,这道题与今年CSP-S2的D1T3有着异曲同工之妙,那就是--都有$O(n!)$的做法!(大雾) 这道题的正解 ...

  6. Python的logging模块基本用法

    Python 的 logging 模块的简单用法 在服务器部署时,往往都是在后台运行.当程序发生特定的错误时,我希望能够在日志中查询.因此这里熟悉以下 logging 模块的用法. logging 模 ...

  7. 【Selenium-WebDriver实战篇】selenium之使用Tess4J进行验证码图片识别内容

    ==================================================================================================== ...

  8. S1_搭建分布式OpenStack集群_04 keystone认证服务安装配置

    一.新建数据库及用户(控制节点)# mysql -uroot -p12345678MariaDB [(none)]> CREATE DATABASE keystone;MariaDB [(non ...

  9. java之大文件分段上传、断点续传

    文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用 ...

  10. struct tcphdr

    包含在/usr/src/linux/include/linux/tcp.h struct tcphdr { __be16 source; __be16 dest; __be32 seq; __be32 ...