分享一个高效数组过滤的方法

[yongxiaofeiche]

在BS系统里，一个很大的性能瓶颈是js的执行性能问题。比如，在前端做一些数据筛选的功能，如果数据量比较大（超过5000），js的性能就无法满足。例如，自己实现的一个下拉框，一边录入，一遍显示筛选结果。我们的数据量在3000左右，全部推送到页面进行处理。最开始使用for循环，通过字符串匹配的方式处理。IE7以上操作起来微卡，IE6会很卡。之后要求可以模糊匹配，因此改用for循环+正则表达式匹配的方式处理。通过IE9的监控发现如果匹配规则不复杂的情况下，性能还不如之前。同样的，IE6下无法使用。之后就改用如下的方式进行数据过滤。IE7以上数据过滤的时间在30毫秒以内完成，即使在IE6下也能够达到和CS或者用flex实现性能。因此，和大家分享一下。

// 筛选函数，可以支持通配符星号、问号
Array.prototype.filter=function(filter){
if(filter==null) return this
var buf=[],regstr=eval("/(\\d*):"+filter.replace(/\*/ig,'.*').replace(/\?/ig,'.')+"/ig");
for(var i=0,l=this.length;i<l;i++) buf.push(i+':'+this[i]+'\n')

buf=buf.join('').match(regstr)
buf=buf.join('\n').replace(regstr,'$1').split('\n');

for(var i=0,l=buf.length;i<l;i++){
buf[i]=this[buf[i]];
}

return buf
}

通过这段时间的研究发现，其实js的性能还是有很大的挖掘潜力的。比如微软的在线Excel，只使用HTML+JS没有使用HTML5的技术，一样可以实现这些交互性很强的页面组件，并且性能很好。希望在这方面有兴趣的朋友一起交流。

[HelloWorld_DotNet]

谢谢分享。不过能讲解下代码吗

[plzzz]

1.用eval这个不被推荐的函数不太好吧? new RegExp也能动态创建正则. 2.在Array.prototype上添加方法,如果某浏览器自带有filter函数怎么办(chrome就有)