解决遍历时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 相关文章推荐
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Element Dialog对话框的使用示例
Jul 26 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设计模式 Command(命令模式)
2011/06/26 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
smarty简单入门实例
2014/11/28 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
详解Bootstrap插件
2016/04/25 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
使用python根据端口号关闭进程的方法
2018/11/06 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
学习雷锋精神心得体会范文
2014/03/12 职场文书
道路建设实施方案
2014/03/18 职场文书
网站美工岗位职责
2014/04/02 职场文书
实习评语大全
2014/04/26 职场文书
员工2014年度工作总结
2014/12/09 职场文书
学校社团活动总结
2015/05/07 职场文书
关于python类SortedList详解
2021/09/04 Python