Grep vs Filter w jQuery?

Zastanawiałem się nad różnicami między Grep i Filter:

Filtruj:

Zmniejsz zestaw dopasowanych elementów do tych, które pasują do selektora lub przeprowadź test funkcji.

Grep:

Znajduje elementy tablicy, które spełniają funkcję filtrującą. Nie ma to wpływu na oryginalną tablicę.

ok.

więc jeśli zrobię to w 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);
});

Mogłem też:

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

W obu sytuacjach nadal mam dostęp do oryginalnej tablicy ...

więc ... gdzie jest różnica?

Oba funkcjonują w podobny sposób, ale różnią się zastosowaniami.

Funkcja filtrująca jest przeznaczona do użytku z elementami html i dlatego jest funkcją łańcuchową, która zwraca obiekt jQuery i akceptuje filtry takie jak „: even”, „: odd” lub „: visible” itd. Możesz ' Zrób to za pomocą funkcji grep, która ma być funkcją narzędziową dla tablic.

Filtr jest częścią jQuery.fn, więc jego celem jest użycie z selektorem, $('div').filtergdzie grep jest metodą narzędzia jQuery ( jQuery.grep)

Różnica w jego zastosowaniu:

Filtr:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

Więc w twoim przypadku wolałbym użyć grep(), ponieważ za pomocą tablicy w ten sposób nie jest konieczne: $(arr).

Przypuszczam też, że grepfunkcja jest szybsza, ponieważ akceptuje tylko tablice.

Do tych, którzy są zainteresowani jak grepwypada na tle filternapisałem ten test:

TLDR; Grep jest wielokrotnie szybszy.

Skrypt, którego użyłem do testów:

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, zamieszczony fragment kodu przedstawia błędy, tutaj jest poprawiony:

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: W Firefoksie filtr jest nieco szybszy, w Chrome jest odwrotnie. Jeśli chodzi tylko o występy, możesz użyć każdego.