jQuery中的Grep与过滤器?
Posted
技术标签:
【中文标题】jQuery中的Grep与过滤器?【英文标题】:Grep vs Filter in jQuery? 【发布时间】:2012-04-25 18:19:39 【问题描述】:我想知道 Grep 和 Filter 之间的区别:
过滤器:
将匹配元素集减少为匹配选择器的元素或 通过函数的测试。
Grep:
查找数组中满足过滤器的元素 功能。原数组不受影响。
好的。
所以如果我在 GREP 中这样做:
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
myNewArray= jQuery.grep(arr, function(n, i)
return (n != 5 && i > 4);
);
我也可以:
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
myNewArray= $(arr).filter( function(n, i)
return (n != 5 && i > 4);
);
在这两种情况下,我仍然可以访问原始数组...
所以...区别在哪里?
【问题讨论】:
我认为.grep()
是一般数组处理的辅助方法,而.filter()
通常用于缩小元素选择范围。我不认为.grep()
返回一个 jQuery 对象,你不能链接它(jQuery.fn.grep
不存在)。
$(arr).filter
arr.filter。
Mahn 没有得到广泛支持
【参考方案1】:
它们的功能相似,但用法不同。
filter 函数旨在与 html 元素一起使用,这就是为什么它是一个可链接的函数,它返回一个 jQuery 对象并接受像 ":even"、":odd" 或 ":visible" 等过滤器。您不能使用 grep 函数来做到这一点,该函数旨在成为数组的实用函数。
【讨论】:
只是想强调 .filter() 在 IE 中不起作用,所以最好使用 $.grep() 以防您的应用支持所有浏览器。 经过测试,发现目前 .filter() 可以在 IE 和 Microsoft Edge 中使用。【参考方案2】:Filter 是 jQuery.fn 的一部分,因此它的目的是与选择器 $('div').filter
一起使用,其中 grep 是一种 jQuery 工具方法 (jQuery.grep
)
【讨论】:
没错,过滤器的正常用法是传递一个选择器字符串。您也可以传递过滤器函数,尽管参数(索引、项目)与本机过滤器函数(项目、索引)相反。此外, grep 似乎与本机数组过滤器功能非常相似。我怀疑 grep for jquery 的优势是与旧浏览器的兼容性...【参考方案3】:用法上的区别:
过滤器:
$(selector).filter(selector/function)
Grep:
$.grep(array,function,invert)
所以在你的情况下,我宁愿使用grep()
,因为以这种方式使用数组是不必要的:$(arr)
。
我还认为grep
函数更快,因为它只接受数组。
【讨论】:
【参考方案4】:对于那些对grep
与filter
的表现感兴趣的人,我编写了这个测试:
TLDR; Grep 快很多倍。
我用于测试的脚本:
function test()
var array = [];
for(var i = 0; i<1000000; i++)
array.push(i);
var filterResult = []
for (var i = 0; i < 1000; i++)
var stime = new Date();
var filter = array.filter(o => o == 99999);
filterResult.push(new Date() - stime);
var grepResult = [];
var stime = new Date();
var grep = $.grep(array,function(i,o)
return o == 99999;
);
grepResult.push(new Date() - stime);
$('p').text('average filter - '+(filterResult.reduce((pv,cv)=> return pv +cv,0)/1000))
$('div').text('average grep - '+(grepResult.reduce((pv,cv)=> return pv + cv,0)/1000))
test();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<div></div>
【讨论】:
【参考方案5】:@Matas Vaitkevicius,sn-p 贴出的代码有错误,这里是更正的:
function test()
var array = [];
for(var i = 0; i<1000000; i++)
array.push(i);
var filterResult = []
for (var i = 0; i < 1000; i++)
var stime = new Date();
var filter = array.filter(o => o == 99999);
filterResult.push(new Date() - stime);
var grepResult = [];
for (var i = 0; i < 1000; i++)
var stime = new Date();
var grep = $.grep(array,function(i,o)
return o == 99999;
);
grepResult.push(new Date() - stime);
$('p').text('average filter - '+(filterResult.reduce((pv,cv)=> return pv +cv,0)/1000))
$('div').text('average grep - '+(grepResult.reduce((pv,cv)=> return pv + cv,0)/1000))
test();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<div></div>
TLDR : 在 Firefox 中,过滤器稍微快一些,在 chrome 中则相反。仅关于表演,您可以使用任何人。
【讨论】:
以上是关于jQuery中的Grep与过滤器?的主要内容,如果未能解决你的问题,请参考以下文章