浅谈JS数据遍历的几种方式
遍历对象(数组)是我们日常撸码的必不可少的部分,如何从性能上优化代码,提高运行效率?下文为你揭开真像:
第一种:普通的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功能。
第六种:forin循环
for(j in arr) { }
简要说明: 这个循环很多人爱用,但实际上,经分析测试,在众多的循环遍历方式中,它的效率是最低的
第七种:map遍历
arr.map(function(n){ });
简要说明:这种方式应用比较广泛,虽然用起来比较优雅,但是实际效率比不上foreach
第八种:forof循环(ES6支持)
for(let value of arr) { };
简要说明: 这种方式是es6里面用到的,性能要好于forin,但仍然比不上普通for循环
各种循环性能对比
上述列举了几种方式都有一一做过对比分析,基本上可以得出的结论是:
普通for循环才是最优雅的!
遍历性能延伸
- while循环比for循环快。
- 倒序循环比顺序循环快。
- 缓存length属性比不缓存快。
- 请不要用arr[i]来判断是否中止循环。
- 请不要在循环内声明变量,用它来引用数组元素,若真的想省几个字符,请在循环外声明。
- 除非是循环对象的属性,请不要用for...in循环。
- 请不要用JavaScript 1.6 的forEach迭代器,特慢!如果一定要用forEach,那么建议自己打造一个。
//倒序(数组最优遍历方式)
var i = arr.length;
while (i--) { } //对象遍历方式
var val;
for(var key in obj){
val = obj[key]
}
以上上实践得出来的结果:https://www.cnblogs.com/rubylouvre/archive/2010/01/29/1658824.html
如果你觉得此文对你有一点小小的帮助,可以赞助作者哦,Mike会更加努力出好文~
浅谈JS数据遍历的几种方式的更多相关文章
- $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- {}+[] = ? 和 []+{} = ? 浅谈JS数据类型转换
参加公司技术嘉年华第一季(前端.服务端)的间隙,陈导问了我一个问题:{}+[] 和 []+{}两个表达式的值分别是什么?根据我的理解我觉得结果应该都是"[object Object]&quo ...
- 浅谈js中的垃圾两种回收机制
一.标记清除 标记清除的主要思想是先建立各个对象的关联,然后从根节点出发,使用广度优先搜索依次标记所有对象,那些不能被标记的对象就应该作为垃圾回收. 这种方式的主要缺点就是如果某些对象被清理后,内存是 ...
- Hashtable 数据遍历的几种方式
Hashtable 在集合中称为键值对,它的每一个元素的类型是 DictionaryEntry,由于Hashtable对象的键和值都是Object类型,决定了它可以放任何类型的数据, 下面我就把Has ...
- 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
很多小伙伴没接触过Redis,以至于去学习的时候感觉云里雾里的,就有一种:教程随你出,懂了算我输的感觉. 每次听圈内人在谈论的时候总是插不上话,小编就偷偷去了解了一下,也算是初入门径. 然后就整理了一 ...
- JS数据交换的三种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 浅谈spring配置定时任务的几种方式
网上看到好多关于定时任务的讲解,以前只简单使用过注解方式,今天项目中看到基于配置的方式实现定时任务,自己做个总结,作为备忘录吧. 基于注解方式的定时任务 首先spring-mvc.xml的配置文件中添 ...
- 浅谈Java对象回收的三种方式
半夜睡不着,加上最近在看Java虚拟机,写点给新手和自己看的东西. 第一类:生命周期中止 void scope(){ Test t = new Test(); } 第二类:对象无引用 (一).对象的应 ...
- JS数据打印的几种方式
/** * 在页面输出内容! */ document.write("This's Great!"); /** * 控制台打印: */ console.log("This ...
随机推荐
- MySQL练习题1
以下SQL操作均在MYSQL上测试过 首先是表定义 1.创建student和score表 CREATE TABLE student ( id ) NOT NULL UNIQUE PRIMARY KEY ...
- java JDK环境的配置
1. 在Administrator用户变量中新建: 变量名:JAVA_HOME 变量值:C:\Program Files (x86)\Java\jdk1.7.0_01 2. 在Administra ...
- 利用XML语法 SQL 列转行
--行转列 固定xml语法 declare @xml xml ; set @xml=cast('<v>2</v><v>4</v><v>3&l ...
- PAT甲级1057 Stack【树状数组】【二分】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805417945710592 题意:对一个栈进行push, pop和 ...
- Oracle ROWNUM用法和分页查询总结
**************************************************************************************************** ...
- HomeBrew及HomeBrew Cask的简介和使用
前言: 最近在Mac终端上安装SVN时用到了HomeBrew工具,虽然常用,但平时没有过多了解,特翻阅了资料总结一下,以便遗忘. 目录结构: 1. 什么是HomeBrew 2. HomeBrew的主要 ...
- listview添加数据
1. 添加数据: ListView1.ViewStyle:=vsReport; ListView1.Columns.Add; ListView1.Columns[0].Caption:='aaaa'; ...
- 【Python全栈】HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
HTML <!--...--> 注释 .CSS/JS //注释 和 /*.....*/ 注释 <!-- -->是HTML的注释标签,使用 < 和 > 是符合HTML ...
- qemu对虚拟机的内存管理(二)
上篇文章主要分析了qemu中对虚拟机内存管理的关键数据结构及他们之间的联系,这篇文章则主要分析在地址空间发生变化时,如何将其更新至KVM中,保持用户空间与内核空间的同步. 这一系列操作与之前说的Add ...
- 5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换
1.前言 首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是: 做一个 viewpager 一组 Fragment 每个 Fragment 绑定一个 xml 最后填充至 viewp ...