JQuery 中的 Grep 与 Filter? ？

我想知道 Grep 和 Filter 之间的区别:

滤镜:

将匹配的元素集减少到匹配选择器或 通过函数测试。

格里普:

查找满足筛选器的数组元素 函数。原始数组不受影响。

好吧。

所以如果我在 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);
});

在这两种情况下，我仍然可以访问原始数组..。

那么... 有什么区别呢？

59142 次浏览
小开

Filter is part of jQuery.fn so it's aim is to be used with selector $('div').filter where grep is a jQuery tool method (jQuery.grep)

小开
最佳答案

They both function in similar ways however they differ in their usages.

The filter function is intended to be used with html elements, and that is why it is a chainable function that returns a jQuery object and it accepts filters like ":even", ":odd" or ":visible" etc. You can't do that with the grep function, which is intended to be a utility function for arrays.

小开

The difference in its usage:

Filter:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

So in your case I would rather use grep() because using array this way is unnecessary: $(arr).

I also suppose that grep function is faster, because it only accepts arrays.

小开

To those that are interested on how grep performs against filter I wrote this test:

TLDR; Grep is many times faster.

Script I used for testing:

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>

小开

@Matas Vaitkevicius, the code snippet posted presents errors, here is a corrected one:

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 : In firefox, filter is slightly faster, in chrome, that's the opposite. Regarding performances only, you can use anyone.


提交答案