Grep vs Filter in jQuery?

Question

I was interested to learn about the differences between Grep and Filter:

Filter:

Reduce the set of matched elements to those that match the selector or perform a function test.

Grep:

Finds array elements that satisfy the filter function. The original array is not affected.

OK.

so if i do this in 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); }); 

I could also:

  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); }); 

In both situations, I can still access the original array ...

so ... where is the difference?

Answer 1

Both of them function the same, but they differ in their customs.

The filter function is intended for use with html elements, which is why it is a binder function that returns a jQuery object and accepts filters like ": even", ": odd" or ": visible", etc. You cannot do this with the grep function, which is for the utility function for arrays.

Answer 2

The filter is part of jQuery.fn, so its purpose should be used with the $('div').filter selector $('div').filter Filter, where grep is the jQuery tool ( jQuery.grep )

Answer 3

Difference in use:

Filter:

 $(selector).filter(selector/function) 

Grep:

 $.grep(array,function,invert) 

So, in your case, I would prefer to use grep() , because you do not need to use an array in this way: $(arr) .

I also assume that the grep function is faster because it only accepts arrays.

Answer 4

For those who are interested in how grep performs against filter , I wrote this test:

TL; DR; 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> 

Answer 5

@Matas Vaitkevicius, the published code snippet presents errors, fixed here:

 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> 

TL; DR: In firefox, the filter is slightly faster, in chrome, vice versa. As for just speaking, you can use anyone.