前言：

数组遍历有很多种方法，虽然不同方法有不同的特性及适用环境，除了普通飞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. Vue+Django项目部署

    本地项目配置 1 复制 luffy/settings/dev.py为prop.py 修改luffy/settings/prop.py中以下几项 (1) allow_hosts ALLOWED_HOST ...

  2. GDI显示图像时设定窗口大小为图像大小

    先前已经能基于GDI显示png图像,但是窗口大小和图像尺寸并不一致.注意到opencv中的imshow的窗口和图像尺寸一致,这里进行设置. 原理 CreateWindow阶段并不能确定窗口大小,但是在 ...

  3. 二、Linux_系统信息查看

    系统信息查看 1. Linux查看cpu核数等信息: [root@tdh01 ~]# grep 'physical id' /proc/cpuinfo | sort -u # 查看物理cpu个数 ph ...

  4. 高精度NTC测温的硬件电路以及软件设计

    什么是NTC NTC是热敏电阻,其电阻值对温度变化敏感,在不同的温度下,可以呈现不同的电阻值. 热敏电阻有两类,一类是负温度系数电阻(NTC),温度增加时,电阻值降低,另一类是正温度系数电阻(PTC) ...

  5. 使用kubeadm 新加入节点（原始token过期后）---转发

    kubeadm join kubeadm init 安装完成后你会得到以下的输出,使用join指令可以新增节点到集群,此token 有效期为24小时 You should now deploy a p ...

  6. Python语言防坑小技巧

    Python语言防坑小技巧 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.赋值即定义  1>.运行以下代码会出现报错 #!/usr/bin/env python #_*_ ...

  7. Windows安装redis报错处理（转！）

    要谈则谈,要打便打! ---2019.5.9,贸易战 转自:http://www.yayihouse.com/yayishuwu/chapter/1297 安装redis报错信息 [9204] 15 ...

  8. Vuex 是什么？

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变   什么是"状态管 ...

  9. springmvc的控制器是不是单例模式,如果是,有什么问题,怎么解决?

    默认情况下是单例模式, 在多线程进行访问的时候,有线程安全问题. 但是不建议使用同步,因为会影响性能. 解决方案,是在控制器里面不能写成员变量. 为什么设计成单例设计模式? 1.性能(不用每次请求都创 ...

  10. Jupyter Notebook（持续更新）

    1.引用Pandas import pandas as pd 2.创建DataFrame bb=pd.DataFrame(enron_data) 3.查看列 & 行 dataFrame.sha ...