JS 数组和对象的遍历方式,以及几种方式的比较。
通常我们会用循环的方式来遍历数组。但是循环是 导致js 性能问题的原因之一。一般我们会采用下几种方式来进行数组的遍历:
方式1:
for in 循环:
var arr = [1,2,3,4,5];
var obj = { a : 1, b : 2, c : 3 };
for( var item in arr|obj ){
fn(item){
// do sth with arr[item];
//do sth wtih obj[item];
};
}
这里的 item:
- array 的索引值,对应于 arr 的下标值;
- object 的 key 值,对应于 obj 的 a,b,c;
方式2:
for 循环:
for (var i=0; i<arr.length; i++){
//do sth with arr[i];
}
这两种方法应该非常常见且使用很频繁。但实际上,这两种方法都存在性能问题。
在方式一中,for-in 需要分析出array 的每个属性,这个操作性能开销很大。用在 key 已知的数组上是非常不划算的。所以尽量不要用 for-in,除非你不清楚要处理哪些属性,例如 JSON 对象这样的情况。
在方式2中,循环每进行一次,就要检查一下数组长度。读取属性(数组长度)要比读局部变量慢,尤其是当 array 里存放的都是 DOM 元素,因为每次读取都会扫描一遍页面上的选择器相关元素,速度会大大降低。
所以这时候我们就有必要对方式2进行优化。
加速的 :
var arr = [1,2,3,4,5];
var length =arr.length;
for(var i=0; i<length; i++){
fn(arr[i]);
}
现在只需要读取一次 array 的 length 属性,速度已经加快了。但是还能不能更快呢?
事实是,如果循环终止条件不进行比较运算,那么循环的速度还可以更快。
加速且优雅的:
var arr = [1,2,3,4,5];
var i = arr.length;
while(i--){
fn(arr[i]);
}
方式 3:
forEach:
var arr = [1,2,3,4,5];
arr.forEach(
fn(value,index){
//Do sth with value ;
}
)
注意:
- 这里的 forEach回调中两个参数分别为 value,index,其位置刚好和 jQuery 的$.each 相反;
- forEach 无法遍历对象;
- IE不支持该方法;Firefox 和 chrome 支持;
- forEach 无法使用 break,continue 跳出循环,且使用 return 是跳过本次循环;
- 可以添加第二个参数,为一个数组,回调中的 this 会指向这个数组,若没有添加,则是指向 window;
关于跳出循环的几种方式:
- return ==》结束循环并中断函数执行;
- break ==》结束循环函数继续执行;
- continue ==》跳过本次循环;
- for 循环中的变量 i,由于 ES5并没有块级作用域的存在,它在循环结束以后仍然存在于内存中,所以建议使用函数自执行的方式来避免;
JS 数组和对象的遍历方式,以及几种方式的比较。的更多相关文章
- JS数组与对象的遍历方法大全
本文简单解析各种数组和对象属性的遍历方法: 原生for循环.for-in及forEach ES6 for-of方法遍历类数组集合 Object.key()返回键名的集合 jQuery的$.each() ...
- JS数组遍历的十二种方式
遍历有如下几种方式 数组方法 map forEach filter find findIndex every some reduce reduceRight 其他方法 for for in for o ...
- js 数组、对象转json 以及 json转 数组、对象
let jsonObj = $.parseJSON(jsonStr); //json字符串转化成json对象(jq方法) var jsonObj = JSON.parse(jsonStr); //js ...
- JavaScript中,数组和对象的遍历方法总结
循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...
- java遍历Map的几种方式
1.遍历map的几种方式:private Hashtable<String, String> emails = new Hashtable<String, String>(); ...
- 遍历map的几种方式
1,平时开发中对map的使用很多,然后发现了很多map可能存在的各种问题:如HashMap 需要放置 1024 个元素,由于没有设置容量初始大小,随着元素不断增加,容量 7 次被迫扩大,resize ...
- java 遍历Map的四种方式
java 遍历Map的四种方式 CreationTime--2018年7月16日16点15分 Author:Marydon 一.迭代key&value 第一种方式:迭代entrySet 1 ...
- 遍历map的6种方式
1,平时开发中对map的使用很多,然后发现了很多map可能存在的各种问题:如HashMap 需要放置 1024 个元素,由于没有设置容量初始大小,随着元素不断增加,容量 7 次被迫扩大,resize ...
- 【转】java中byte数组与int类型的转换(两种方式)----不错
原文网址:http://blog.csdn.net/piaojun_pj/article/details/5903009 java中byte数组与int类型的转换,在网络编程中这个算法是最基本的算法, ...
随机推荐
- jenkins定时任务未生效解决
近期在配置jenkins定时任务时,发现未生效,并没有按时触发任务 解决思路: 1.先查看下我们的定时任务有没有选择正确,如下说明: Poll SCM:定时检查源码变更,如果有更新就checkout最 ...
- Ubuntu 16.04系统下apt-get和dpkg区别
两者的区别是dpkg绕过apt包管理数据库对软件包进行操作,所以你用dpkg安装过的软件包用apt可以再安装一遍,系统不知道之前安装过了,将会覆盖之前dpkg的安装.1.dpkg是用来安装.deb文件 ...
- Mavlink - 无人机通讯协议
http://qgroundcontrol.org/mavlink/start mavlink协议介绍https://pixhawk.ethz.ch/mavlink/ 消息简介 MAVLink简介 M ...
- yii的安装
1.安装composer windows系统直接下载Composer-Setup.exe 运行安装. 2.安装Composer asset plugin composer安装完成后,在一个可通过web ...
- [分布式系统学习]阅读笔记 Distributed systems for fun and profit 之四 Replication 拷贝
阅读http://book.mixu.net/distsys/replication.html的笔记,是本系列的第四章 拷贝其实是一组通信问题,为一些子问题,例如选举,失灵检测,一致性和原子广播提供了 ...
- UVM phase的用法研究【zz】
原文地址:http://bbs.eetop.cn/viewthread.php?tid=383872&extra=&authorid=828160&page=1 我相信很多朋友 ...
- ABP之框架体系
一 .框架体系的介绍 ABP框架采用的是DDD(领域驱动设计)的原则,可以很方便实现项目之间的松耦合,采用模块化的方式,方便对框架的扩展. 按照DDD的原则,首先将项目分为四层: 展现层:用来展现给用 ...
- POJ1860 Currency Exchange【最短路-判断环】
Several currency exchange points are working in our city. Let us suppose that each point specializes ...
- TOP100summit 2017:投资千亿成立达摩院,揭秘阿里在人工智能领域的探索
今天上午,阿里巴巴云栖大会在杭州开幕,第一条重磅消息是阿里首席技术官张建锋宣布成立达摩院,在全球各地建立实验室,3年内投入千亿在全球建立实验室.和高校建立研究所.建立全球研究中心等事务. 该院由全球实 ...
- SCSI共享磁盘
服务器端: [root@scsi ~]# fdisk -l Disk /dev/sda: 32.2 GB, 32212254720 bytes 255 heads, 63 sectors/track, ...