Grep vs Filter in jQuery?

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?

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.

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)

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.

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, 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.