jQuery中的Grep与过滤器？答案

【问题标题】：Grep vs Filter in jQuery?jQuery中的Grep与过滤器？
【发布时间】：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 没有得到广泛支持

标签： jquery filter

【解决方案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 中则相反。仅关于表演，您可以使用任何人。

【讨论】：