web-dev-qa-db-fra.com

Grep vs Filter dans jQuery?

Je m'interrogeais sur les différences entre Grep et Filter:

Filtrer:

Réduisez l'ensemble d'éléments correspondants à ceux qui correspondent au sélecteur ou passez le test de la fonction.

Grep:

Trouve les éléments d'un tableau qui remplissent une fonction de filtre. Le tableau d'origine n'est pas affecté.

ok.

donc si je fais cela dans 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);
});

Je pourrais faire aussi:

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

Dans les deux cas, je peux toujours accéder au tableau d'origine ...

alors ... où est la différence?

jqueryfilter
80
Royi Namir

Ils fonctionnent tous les deux de la même manière, mais leurs usages diffèrent.

La fonction de filtre est destinée à être utilisée avec des éléments html. C’est pourquoi il s’agit d’une fonction chaînable qui renvoie un objet jQuery et accepte les filtres tels que ": pair", ": impair" ou ": visible", etc. ne le faites pas avec la fonction grep, qui est censée être une fonction d’utilité pour les tableaux.

128
omerkirk

Le filtre fait partie de jQuery.fn, son but est donc d’être utilisé avec le sélecteur $('div').filter où grep est une méthode de l’outil jQuery (jQuery.grep)

17
GillesC

La différence dans son utilisation:

Filtre:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

Donc, dans votre cas, je préférerais utiliser grep(), car il est inutile d'utiliser un tableau de cette façon: $(arr).

Je suppose aussi que la fonction grep est plus rapide, car elle accepte uniquement les tableaux.

5
user669677

Pour ceux qui sont intéressés par les résultats de grep par rapport à filter, j’ai écrit ce test:

TLDR; Grep est plusieurs fois plus rapide.

Script que j'ai utilisé pour tester:

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>
1
Matas Vaitkevicius

@Matas Vaitkevicius, l'extrait de code publié présente des erreurs, en voici une corrigée:

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: Dans Firefox, le filtre est légèrement plus rapide, en chrome, c'est l'inverse. En ce qui concerne les performances uniquement, vous pouvez utiliser n'importe qui.

0
Pierre Bonhoure