前言：

数组遍历有很多种方法，虽然不同方法有不同的特性及适用环境，除了普通飞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. Centos7搭建DockerRegistry

    1. 说明 以下使用系统centos7,64位,镜像为CentOS-7-x86_64-Minimal-1804,均已root用户进行操作 2. 安装Registry Docker Registry 是 ...

  2. linux下的 c 和 c++ 开发工具及linux内核开发工具

    https://opensource.com/article/18/6/embedded-linux-build-tools https://github.com/luong-komorebi/Awe ...

  3. 【笔记】MAML-模型无关元学习算法

    目录 论文信息: Finn C, Abbeel P, Levine S. Model-agnostic meta-learning for fast adaptation of deep networ ...

  4. OpenStack共享组件-RabbitMQ消息队列

    1. MQ 全称为 Message Queue, 消息队列( MQ ),是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们. 消息 ...

  5. 泛微 e-cology OA 远程代码执行漏洞复现

    0x00 前言 Poc已在github公开,由于环境搭建较为复杂,所以我在空间搜索引擎中找了国外的网站进行复现 如果有想自行搭建环境复现的可以在公众号内回复“泛微环境”即可获取源码及搭建方式 0x01 ...

  6. PAT甲级1008水题飘过

    题目分析:上去下来到达的时间和数量 #include<iostream> using namespace std; ]; int main(){ int n; while(scanf(&q ...

  7. Codeforces D. Intercity Travelling（区间组合）

    题目描述: D. Intercity Travelling time limit per test 1.5 seconds memory limit per test 256 megabytes in ...

  8. 用mingw32编译ffmpeg2.7

    1.  下载x265最新源码:      下载ffmpeg源码(我用的是2.7):      下载cmake最新版本并安装:      下载SDL(我用的SDL-1.2.15):      下载min ...

  9. 解决：一个项目中写多个包含main函数的源文件并分别调试运行

    自己在学c++的时候,一个项目中的多个cpp文件默认不允许多个main函数的出现,但是通过选项操作能够指定单个cpp文件进行运行,如下: 1.此时我就想运行第二个cpp文件,我们只需要把其他的两个右键 ...

  10. AtCoder Beginner Contest 127 解题报告

    传送门 非常遗憾.当天晚上错过这一场.不过感觉也会掉分的吧.后面两题偏结论题,打了的话应该想不出来. A - Ferris Wheel #include <bits/stdc++.h> u ...