Grep vs Filter in jQuery?

84

Ich habe mich über die Unterschiede zwischen Grep und Filter gewundert:

Filter:

Reduzieren Sie den Satz übereinstimmender Elemente auf diejenigen, die dem Selektor entsprechen, oder bestehen Sie den Funktionstest.

Grep:

Findet die Elemente eines Arrays, die eine Filterfunktion erfüllen. Das ursprüngliche Array ist nicht betroffen.

OK.

Also, wenn ich das in GREP mache:

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

Ich könnte auch tun:

 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 beiden Situationen kann ich immer noch auf das ursprüngliche Array zugreifen ...

Also ... wo ist der Unterschied?

Royi Namir
quelle
4
Ich denke, es .grep()ist eine Hilfsmethode für die allgemeine Array-Verarbeitung, während sie .filter()normalerweise zum Eingrenzen der Elementauswahl verwendet wird. Ich glaube nicht, dass .grep()ein jQuery-Objekt zurückgegeben wird, und Sie können es nicht verketten ( jQuery.fn.grepexistiert nicht).
Felix Kling
2
$(arr).filter<- dies ist nicht erforderlich, tun Sie es arr.filterstattdessen.
Mahn
2
Mahn nicht weit verbreitet
Royi Namir

Antworten:

135

Sie funktionieren beide auf ähnliche Weise, unterscheiden sich jedoch in ihrer Verwendung.

Die Filterfunktion soll für HTML-Elemente verwendet werden. Aus diesem Grund handelt es sich um eine verkettbare Funktion, die ein jQuery-Objekt zurückgibt und Filter wie ": gerade", ": ungerade" oder ": sichtbar" usw. akzeptiert. Dies tun Sie nicht mit der grep-Funktion, die als Dienstprogramm für Arrays gedacht ist.

Omerkirk
quelle
1
Ich wollte nur hervorheben, dass .filter () im IE nicht funktioniert. Verwenden Sie daher besser $ .grep (), falls Ihre App alle Browser unterstützt.
Vohrahul
1
getestet und festgestellt, dass .filter () derzeit sowohl im IE als auch in Microsoft Edge funktioniert.
Umesh K.
19

Filter ist Teil von jQuery.fn, daher ist es das Ziel, mit Selector verwendet zu werden, $('div').filterwobei grep eine jQuery-Tool-Methode ist ( jQuery.grep)

GillesC
quelle
Richtig, die normale Verwendung von Filter besteht darin, eine Auswahlzeichenfolge zu übergeben. Sie können auch eine Filterfunktion übergeben, obwohl die Argumente (Index, Element) der nativen Filterfunktion (Element, Index) entgegengesetzt sind. Außerdem scheint grep der nativen Array-Filterfunktion sehr ähnlich zu sein. Ich vermute, dass der Vorteil von grep für jquery die Kompatibilität mit älteren Browsern ist ...
Bryan Matthews
6

Der Unterschied in seiner Verwendung:

Filter:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

In Ihrem Fall würde ich lieber verwenden, grep()da die Verwendung des Arrays auf diese Weise nicht erforderlich ist : $(arr).

Ich nehme auch an, dass die grepFunktion schneller ist, weil sie nur Arrays akzeptiert.

Jasonscript
quelle
1

Für diejenigen, die daran interessiert sind, wie grepgegen sie vorgeht, habe filterich diesen Test geschrieben:

TLDR; Grep ist um ein Vielfaches schneller.

Skript, das ich zum Testen verwendet habe:

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
quelle
0

@Matas Vaitkevicius, das veröffentlichte Code-Snippet enthält Fehler. Hier ist ein korrigierter:

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 ist der Filter etwas schneller, in Chrome ist das Gegenteil der Fall . Nur in Bezug auf Leistungen können Sie jeden verwenden.

Pierre Bonhoure
quelle