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 扩展方法
May 06 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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
类的另类用法--数据的封装
2006/10/09 PHP
一个好用的分页函数
2006/11/16 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python开发之thread实现布朗运动的方法
2015/11/11 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python中字符串List按照长度排序
2019/07/01 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
通过代码实例了解Python sys模块
2020/09/14 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
益达广告词
2014/03/14 职场文书
房地产开发项目建议书
2014/05/16 职场文书
欢度春节标语
2014/07/01 职场文书
会计个人实习计划书
2014/08/15 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
干部年终考核评语
2015/01/04 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
红色经典观后感
2015/06/18 职场文书
聊一聊python常用的编程模块
2021/05/14 Python