解决遍历时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 18 Javascript
Javascript中的变量使用说明
May 18 Javascript
js单例模式的两种方案
Oct 22 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
用JS实现选项卡
Mar 23 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
javascript数据类型详解
2017/02/07 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
浅谈js闭包理解
2019/04/01 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
支部书记四风对照材料
2014/08/28 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery