Grep vs Filter en jQuery?

84

Me preguntaba acerca de las diferencias entre Grep y Filter:

Filtro:

Reduzca el conjunto de elementos coincidentes a aquellos que coincidan con el selector o pasen la prueba de la función.

Grep:

Encuentra los elementos de una matriz que satisfacen una función de filtro. La matriz original no se ve afectada.

Okay.

así que si hago esto en 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);
});

También podría hacer: 

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

En ambas situaciones todavía puedo acceder a la matriz original ...

entonces ... ¿dónde está la diferencia?

jquery filter Royi Namir
fuente
4
Creo que .grep()es un método auxiliar para el procesamiento general de matrices, mientras .filter()que generalmente se usa para reducir las selecciones de elementos. No creo que .grep()devuelva un objeto jQuery y no puede encadenarlo ( jQuery.fn.grepno existe).
Felix Kling
2
$(arr).filter<- esto es innecesario, hágalo en su arr.filterlugar.
Mahn
2
Mahn no es ampliamente apoyado
Royi Namir

Respuestas:

135

Ambos funcionan de manera similar, sin embargo, difieren en sus usos.

La función de filtro está destinada a ser utilizada con elementos html, y por eso es una función encadenable que devuelve un objeto jQuery y acepta filtros como ": par", ": impar" o ": visible", etc. Haga eso con la función grep, que pretende ser una función de utilidad para matrices.

Omerkirk
fuente
1
Solo quería resaltar que .filter () no funciona en IE, por lo que es mejor usar $ .grep () en caso de que su aplicación sea compatible con todos los navegadores.
vohrahul
1
probado y descubrió que actualmente .filter () funciona en IE y Microsoft Edge.
Umesh K.
19

El filtro es parte de jQuery.fn, por lo que su objetivo es usarlo con el selector, $('div').filterdonde grep es un método de herramienta jQuery ( jQuery.grep)

GillesC
fuente
Es cierto que el uso normal del filtro es pasar una cadena de selección. También puede pasar una función de filtro, aunque los argumentos (índice, elemento) son opuestos a la función de filtro nativa (elemento, índice). Además, grep parece ser muy similar a la función de filtro de matriz nativa. Sospecho que la ventaja de grep para jquery es la compatibilidad con navegadores más antiguos ...
Bryan Matthews
6

La diferencia en su uso:

Filtrar:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

Así, en su caso prefiero usar grep()porque el uso conjunto de esta manera no es necesario: $(arr).

También supongo que esa grepfunción es más rápida, porque solo acepta matrices.

jasonscript
fuente
1

Para aquellos que estén interesados ​​en cómo grepfunciona contra filter, escribí esta prueba:

TLDR; Grep es muchas veces más rápido.

Script que utilicé para probar:

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 fragmento

Matas Vaitkevicius
fuente
0

@Matas Vaitkevicius, el fragmento de código publicado presenta errores, aquí hay uno corregido:

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 fragmento

TLDR: en Firefox , el filtro es un poco más rápido, en Chrome, eso es todo lo contrario. Solo con respecto a las actuaciones, puede utilizar a cualquiera.

Pierre Bonhoure
fuente