Grep vs Filter w jQuery?

84

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?

jquery filter Royi Namir
źródło
4
Myślę, że .grep()jest to metoda pomocnicza do ogólnego przetwarzania tablic, podczas gdy .filter()jest zwykle używana do zawężania wyboru elementów. Myślę, że nie .grep()zwraca obiektu jQuery i nie można go połączyć w łańcuch ( jQuery.fn.grepnie istnieje).
Felix Kling
2
$(arr).filter<- to jest niepotrzebne, arr.filterzamiast tego zrób .
Mahn
2
Mahn nie jest szeroko obsługiwany
Royi Namir

Odpowiedzi:

135

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.

omerkirk
źródło
1
Chciałem tylko podkreślić, że .filter () nie działa w IE, więc lepiej użyć $ .grep (), jeśli Twoja aplikacja obsługuje wszystkie przeglądarki.
vohrahul
1
przetestował i stwierdził, że obecnie .filter () działa zarówno w przeglądarce IE, jak i Microsoft Edge.
Umesh K.
19

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)

GillesC
źródło
To prawda, normalnym użyciem filtru jest przekazanie ciągu selektora. Możesz również przekazać funkcję filtrującą, chociaż argumenty (indeks, pozycja) są przeciwne do natywnej funkcji filtrującej (pozycja, indeks). Ponadto grep wydaje się być bardzo podobny do natywnej funkcji filtrującej tablicę. Podejrzewam, że zaletą grep dla jquery jest kompatybilność ze starszymi przeglądarkami ...
Bryan Matthews
6

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.

jasonscript
źródło
1

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>
Rozwiń fragment

Matas Vaitkevicius
źródło
0

@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>
Rozwiń fragment

TLDR: W Firefoksie filtr jest nieco szybszy, w Chrome jest odwrotnie. Jeśli chodzi tylko o występy, możesz użyć każdego.

Pierre Bonhoure
źródło