Grep vs Filter no jQuery?

84

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?

jquery filter Royi Namir
fonte
4
Eu acho que .grep()é um método auxiliar para processamento de array geral, enquanto .filter()é normalmente usado para restringir as seleções de elementos. Eu não acho que .grep()retorna um objeto jQuery, e você não pode encadeá-lo ( jQuery.fn.grepnão existe).
Felix Kling
2
$(arr).filter<- isso não é necessário, faça em arr.filtervez disso.
Mahn
2
Mahn não é amplamente suportado
Royi Namir

Respostas:

135

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.

Omerkirk
fonte
1
Só queria destacar que .filter () não funciona no IE, então é melhor usar $ .grep () caso seu aplicativo suporte todos os navegadores.
vohrahul de
1
testado e descobri que atualmente .filter () funciona no IE e também no Microsoft Edge.
Umesh K.
19

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)

GillesC
fonte
É verdade que o uso normal do filtro é passar uma string de seletor. Você também pode passar uma função de filtro, embora os argumentos (índice, item) sejam opostos à função de filtro nativa (item, índice). Além disso, grep parece ser muito semelhante à função de filtro de array nativo. Suspeito que a vantagem do grep para jquery é a compatibilidade com navegadores mais antigos ...
Bryan Matthews
6

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.

jasonscript
fonte
1

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>
Expandir snippet

Matas Vaitkevicius
fonte
0

@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>
Expandir snippet

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.

Pierre Bonhoure
fonte