JS常用的几种数组遍历方式以及性能分析对比实例详解


Posted in Javascript onApril 11, 2018

本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比。分享给大家供大家参考,具体如下:

前言

这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比

起由

在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比

JS数组遍历的几种方式

JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比

第一种:普通for循环

代码如下:

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

简要说明: 最简单的一种,也是使用频率最高的一种,虽然性能不弱,但仍有优化空间

第二种:优化版for循环

代码如下:

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

简要说明: 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。

这种方法基本上是所有循环遍历方法中性能最高的一种

第三种:弱化版for循环

代码如下:

for(j = 0; arr[j]!=null; j++) {
}

简要说明: 这种方法其实严格上也属于for循环,只不过是没有使用length判断,而使用变量本身判断

实际上,这种方法的性能要远远小于普通for循环

第四种:foreach循环

代码如下:

arr.forEach(function(e){
});

简要说明: 数组自带的foreach循环,使用频率较高,实际上性能比普通for循环弱

第五种:foreach变种

代码如下:

Array.prototype.forEach.call(arr,function(el){
});

简要说明: 由于foreach是Array型自带的,对于一些非这种类型的,无法直接使用(如NodeList),所以才有了这个变种,使用这个变种可以让类似的数组拥有foreach功能。

实际性能要比普通foreach弱

第六种:forin循环

代码如下:

for(j in arr) {
}

简要说明: 这个循环很多人爱用,但实际上,经分析测试,在众多的循环遍历方式中

它的效率是最低的

第七种:map遍历

代码如下:

arr.map(function(n){
});

简要说明: 这种方式也是用的比较广泛的,虽然用起来比较优雅,但实际效率还比不上foreach

第八种:forof遍历(需要ES6支持)

代码如下:

for(let value of arr) {
});

简要说明: 这种方式是es6里面用到的,性能要好于forin,但仍然比不上普通for循环

各种遍历方式的性能对比

上述列举了几种方式都有一一做过对比分析,基本上可以得出的结论是:

普通for循环才是最优雅的

(PS:以上所有的代码都只是进行空的循环,没有再循环内部执行代码,仅仅是分析各自循环的时间而已)

性能对比截图

分析结果1

以下截图中的数据是,在chrome (支持es6)中运行了100次后得出的结论(每次运行10次,一共10个循环,得到的分析结果)

 JS常用的几种数组遍历方式以及性能分析对比实例详解

可以看出,forin循环最慢。优化后的普通for循环最快

分析结果2

以下截图数据是,在chrome (支持es6)中运行了1000次后得出的结论(每次运行100次,一共10个循环,得到的分析结果)

 JS常用的几种数组遍历方式以及性能分析对比实例详解

另外,可使用如下demo中可以使用分析工具进行 JS数组遍历方式分析对比

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
详解vue组件之间的通信
Aug 30 Javascript
node结合swig渲染摸板的方法
Apr 11 #Javascript
详解react、redux、react-redux之间的关系
Apr 11 #Javascript
Mac下安装vue
Apr 11 #Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 #Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 #Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 #Javascript
vue 组件高级用法实例详解
Apr 11 #Javascript
You might like
用 PHP5 轻松解析 XML
2006/12/04 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php中socket的用法详解
2014/10/24 PHP
浅谈php命令行用法
2015/02/04 PHP
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
js格式化时间的方法
2015/12/18 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
Python PyQt5标准对话框用法示例
2017/08/23 Python
用python实现的线程池实例代码
2018/01/06 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python add_argument()用法解析
2020/01/29 Python
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
后备干部推荐材料
2014/12/24 职场文书
师德师风个人总结
2015/02/06 职场文书
财务工作失误检讨书
2015/02/19 职场文书
个人工作能力自我评价
2015/03/05 职场文书
财务管理制度范本
2015/08/04 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
Golang中channel的原理解读(推荐)
2021/10/16 Golang
关于 Python json中load和loads区别
2021/11/07 Python