解决遍历时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 相关文章推荐
关于javascript function对象那些迷惑分析
Oct 24 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
js中url对象化管理分析
Dec 29 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
JavaScript组合模式---引入案例分析
May 23 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
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
早餐连锁店计划书
2014/01/08 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
邀请函怎么写
2015/01/30 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers