web-dev-qa-db-ja.com

jQueryのGrep vs Filter？

私はGrepとFilterの違いについて疑問に思っていました：

フィルター：

一致する要素のセットをセレクターに一致するものに減らすか、関数のテストに合格します。

グレップ：

フィルター関数を満たす配列の要素を見つけます。元の配列は影響を受けません。

ok。

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

私もできる：

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

どちらの状況でも、元の配列にアクセスできます...

だから...違いはどこですか？

jqueryfilter
80
Royi Namir

どちらも同じように機能しますが、用途が異なります。

フィルター関数はhtml要素で使用することを目的としているため、jQueryオブジェクトを返すチェーン可能な関数であり、「：even」、「：odd」、「：visible」などのフィルターを受け入れます。配列のユーティリティ関数となることを目的としたgrep関数を使用してこれを行います。

128
omerkirk

フィルターはjQuery.fnの一部であるため、grepがjQueryツールメソッドであるセレクター$('div').filter（jQuery.grep）

17
GillesC

その使用法の違い：

フィルタ：

$(selector).filter(selector/function)

Grep：

$.grep(array,function,invert)

配列をこのように使用する必要はないので、あなたの場合はgrep()を使用します：$(arr)。

また、配列のみを受け入れるため、grep関数の方が高速だと思います。

5
user669677

grepがfilterに対してどのように機能するかに興味がある人には、このテストを書きました。

TLDR; Grepは何倍も高速です。

テストに使用したスクリプト：

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、投稿されたコードスニペットにはエラーがありますが、ここに修正されたものがあります。

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： firefoxでは、フィルターはわずかに高速ですが、クロムでは逆です。パフォーマンスに関してのみ、誰でも使用できます。

0
Pierre Bonhoure