Grep vs Filter no jQuery?

Eu estava me perguntando sobre as diferenças entre Grep e Filter:

Filtro:

Reduza o conjunto de elementos correspondentes àqueles que correspondem ao seletor ou passe no teste da função.

Grep:

Encontra os elementos de uma matriz que satisfazem uma função de filtro. A matriz original não é afetada.

Está bem.

então, se eu fizer isso no 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);
});

Eu poderia fazer também:

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

Em ambas as situações, ainda consigo acessar o array original ...

então ... onde está a diferença?

Ambos funcionam de maneiras semelhantes, porém diferem em seus usos.

A função de filtro deve ser usada com elementos html, e é por isso que é uma função encadeada que retorna um objeto jQuery e aceita filtros como ": par", ": ímpar" ou ": visível" etc. Você pode ' Faça isso com a função grep, que se destina a ser uma função de utilidade para arrays.

O filtro é parte do jQuery.fn, portanto, seu objetivo é ser usado com o seletor, $('div').filteronde grep é um método da ferramenta jQuery ( jQuery.grep)

A diferença em seu uso:

Filtro:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

Assim, no seu caso, eu prefiro usar grep(), porque usando um array desta forma é desnecessária: $(arr).

Também suponho que essa grepfunção seja mais rápida, porque só aceita matrizes.

Para aqueles que estão interessados ​​em saber como é o grepdesempenho filter, escrevi este teste:

TLDR; Grep é muitas vezes mais rápido.

Script que usei para testar:

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, o snippet de código postado apresenta erros, aqui está um corrigido:

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: No firefox, o filtro é um pouco mais rápido, no cromo é o oposto. Com relação apenas às apresentações, você pode usar qualquer pessoa.