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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
小程序实现分类页
Jul 12 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Tensorflow简单验证码识别应用
2017/05/25 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python脚本开机自启的实现方法
2019/06/28 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
简单的JAVA编程面试题
2013/03/19 面试题
党员干部作风建设思想汇报范文
2014/10/25 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫