解决遍历时Array.indexOf产生的性能问题


Posted in Javascript onJuly 03, 2012
Ext.applyIf(Array.prototype, { 
/** 
* Checks whether or not the specified object exists in the array. 
* @param {Object} o The object to check for 
* @param {Number} from (Optional) The index at which to begin the search 
* @return {Number} The index of o in the array (or -1 if it is not found) 
*/ 
indexOf : function(o, from){ 
var len = this.length; 
from = from || 0; 
from += (from < 0) ? len : 0; 
for (; from < len; ++from){ 
if(this[from] === o){ 
return from; 
} 
}); 
return -1; 
}

从源码可以看出,查找是简单的线性查找。
由于线性查找效率是 O(n) ,所以,在数据量稍大的时候,需要寻找替代 Array 的办法。有很多文章说过关于 Array 的这个问题,包括《权威指南》,办法是模拟一个 Hash 表。
下面是有问题的代码
var hostsIP = []; 
Ext.each(_this.hosts,function(item){ 
hostsIP.push(item.ip); 
}); 
Ext.each(txtHostsIP,function(ip){ 
if(hostsIP.indexOf(ip)===-1){//问题代码 
var host = { 
isAppend : true,//新增的主机 
isAgentOk : false, 
ip : ip 
}; 
_this.hosts.push( 
Ext.apply(host,_this.MAPPING_FIELDS) 
); 
isAppend = true; 
}else{ 
errors.push('IP['+ip+']已存在'); 
} 
});

当hostsIP长度超过2000个时,IE8-浏览器会出现如下提示

解决遍历时Array.indexOf产生的性能问题

按照《权威指南》中给出的提示,我对代码做了如下修改后,问题解决。
var hostsIP = {}; 
Ext.each(_this.hosts,function(item){ 
hostsIP[item.ip]=item.ip; 
}); Ext.each(txtHostsIP,function(ip){ 
if(!hostsIP.hasOwnProperty(ip)){ 
var host = { 
isAppend : true,//新增的主机 
isAgentOk : false, 
ip : ip 
}; 
_this.hosts.push( 
Ext.apply(host,_this.MAPPING_FIELDS) 
); 
isAppend = true; 
}else{ 
errors.push('IP['+ip+']已存在'); 
} 
});
Javascript 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
JavaScript中变量提升 Hoisting
Jul 03 #Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 #Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 #Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 #Javascript
JavaScript中的细节分析
Jun 30 #Javascript
JavaScript中的作用域链和闭包
Jun 30 #Javascript
JavaScript中的面向对象介绍
Jun 30 #Javascript
You might like
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
深入理解Node module模块
2018/03/26 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python几种常用功能实现代码实例
2019/12/25 Python
浅谈Python中的字符串
2020/06/10 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
党员公开承诺书范文
2014/03/25 职场文书
药店促销活动总结
2014/07/10 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
Spring Bean是如何初始化的详解
2022/03/22 Java/Android