解决遍历时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 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
js变换显示图片的实例
Apr 16 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
javaScript Array api梳理
Mar 31 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安全配置
2006/12/06 PHP
php array_walk() 数组函数
2011/07/12 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
js返回顶部实例分享
2016/12/21 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python动态参数用法实例分析
2015/05/25 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
Oracle性能调优原则
2012/05/03 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
学校评语大全
2014/05/06 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书