jQuery中的Grep与过滤器?

Posted

技术标签:

【中文标题】jQuery中的Grep与过滤器?【英文标题】:Grep vs Filter in jQuery? 【发布时间】:2012-04-25 18:19:39 【问题描述】:

我想知道 Grep 和 Filter 之间的区别:

过滤器:

将匹配元素集减少为匹配选择器的元素或 通过函数的测试。

Grep:

查找数组中满足过滤器的元素 功能。原数组不受影响。

好的。

所以如果我在 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);
);

在这两种情况下,我仍然可以访问原始数组...

所以...区别在哪里?

【问题讨论】:

我认为.grep() 是一般数组处理的辅助方法,而.filter() 通常用于缩小元素选择范围。我不认为.grep() 返回一个 jQuery 对象,你不能链接它(jQuery.fn.grep 不存在)。 $(arr).filter arr.filter。 Mahn 没有得到广泛支持 【参考方案1】:

它们的功能相似,但用法不同。

filter 函数旨在与 html 元素一起使用,这就是为什么它是一个可链接的函数,它返回一个 jQuery 对象并接受像 ":even"、":odd" 或 ":visible" 等过滤器。您不能使用 grep 函数来做到这一点,该函数旨在成为数组的实用函数。

【讨论】:

只是想强调 .filter() 在 IE 中不起作用,所以最好使用 $.grep() 以防您的应用支持所有浏览器。 经过测试,发现目前 .filter() 可以在 IE 和 Microsoft Edge 中使用。【参考方案2】:

Filter 是 jQuery.fn 的一部分,因此它的目的是与选择器 $('div').filter 一起使用,其中 grep 是一种 jQuery 工具方法 (jQuery.grep)

【讨论】:

没错,过滤器的正常用法是传递一个选择器字符串。您也可以传递过滤器函数,尽管参数(索引、项目)与本机过滤器函数(项目、索引)相反。此外, grep 似乎与本机数组过滤器功能非常相似。我怀疑 grep for jquery 的优势是与旧浏览器的兼容性...【参考方案3】:

用法上的区别:

过滤器:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

所以在你的情况下,我宁愿使用grep(),因为以这种方式使用数组是不必要的:$(arr)

我还认为grep 函数更快,因为它只接受数组。

【讨论】:

【参考方案4】:

对于那些对grepfilter 的表现感兴趣的人,我编写了这个测试:

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>

【讨论】:

【参考方案5】:

@Matas Vaitkevicius,sn-p 贴出的代码有错误,这里是更正的:

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 中,过滤器稍微快一些,在 chrome 中则相反。仅关于表演,您可以使用任何人。

【讨论】:

以上是关于jQuery中的Grep与过滤器?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery中的$.grep()方法的使用

使用 jQuery grep() 过滤 JSON 数组

使用没有对象包装器的 Jquery $.grep 过滤对象数组

jQuery遍历数组与筛选数组的方法

Jquery 遍历数组之grep()方法介绍

grep命令与正则表达式(过滤)一