Grep vs Filter in jQuery?

Mi chiedevo quali fossero le differenze tra Grep e Filter:

Filtro:

Riduci l'insieme di elementi corrispondenti a quelli che corrispondono al selettore o supera il test della funzione.

Grep:

Trova gli elementi di un array che soddisfano una funzione di filtro. L'array originale non viene influenzato.

ok.

quindi se lo faccio 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);
});

Potrei fare anche:

 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 entrambe le situazioni posso ancora accedere all'array originale ...

quindi ... dov'è la differenza?

Entrambi funzionano in modo simile, ma differiscono nei loro usi.

La funzione filtro è concepita per essere utilizzata con elementi html, ed è per questo che è una funzione concatenabile che restituisce un oggetto jQuery e accetta filtri come ": even", ": odd" o ": visible" ecc. Puoi ' Farlo con la funzione grep, che vuole essere una funzione di utilità per gli array.

Filter fa parte di jQuery.fn quindi il suo scopo è di essere utilizzato con selector $('div').filterdove grep è un metodo dello strumento jQuery ( jQuery.grep)

La differenza nel suo utilizzo:

Filtro:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

Quindi nel tuo caso avrei preferito usare grep()perché l'utilizzo di serie in questo modo non è necessario: $(arr).

Suppongo anche che la grepfunzione sia più veloce, perché accetta solo array.

A coloro che sono interessati a come si grepcomporta contro filterho scritto questo test:

TLDR; Grep è molte volte più veloce.

Script che ho usato per il test:

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, lo snippet di codice pubblicato presenta errori, eccone uno corretto:

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, il filtro è leggermente più veloce, in Chrome, è l'opposto. Per quanto riguarda solo le esibizioni, puoi usare chiunque.