解决遍历时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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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实现读取超大文件的方法
2014/07/28 PHP
PHP比你想象的好得多
2014/11/27 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
介绍Python中几个常用的类方法
2015/04/08 Python
python中循环语句while用法实例
2015/05/16 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
党员承诺书内容
2014/03/26 职场文书
法人委托书
2014/07/31 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
Python四款GUI图形界面库介绍
2022/06/05 Python