Grep vs Bộ lọc trong jQuery?

Question

tôi đã tự hỏi về sự khác nhau giữa Grep và Lọc:

Lọc:

Giảm tập các phần tử phù hợp với những người phù hợp với selector hoặc vượt qua bài kiểm tra của hàm.

Grep:

Finds các yếu tố của một mảng mà đáp ứng một bộ lọc chức năng. Mảng gốc không bị ảnh hưởng.

ok.

vì vậy nếu tôi làm điều này trong 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); 
}); 

tôi có thể làm thê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); 
}); 

Trong cả hai tình huống tôi vẫn có thể truy cập vào các mảng ban đầu ...

vậy ... sự khác biệt ở đâu?

Answer 1

Cả hai chức năng theo cách tương tự tuy nhiên chúng khác nhau trong tập quán của họ.

Chức năng lọc được thiết kế để sử dụng với các phần tử html, và đó là lý do tại sao hàm là một hàm có thể chuỗi trả về đối tượng jQuery và chấp nhận các bộ lọc như ": even", "odd" hoặc ": visible" Bạn không thể làm điều đó với hàm grep, được dự định là một hàm tiện ích cho các mảng.

Answer 2

Lọc là một phần của jQuery.fn nên nó mục đích là để được sử dụng với selector $('div').filter nơi grep là một phương pháp cụ jQuery (jQuery.grep)

Answer 3

Sự khác biệt trong sử dụng của nó:

Lọc:

$(selector).filter(selector/function) 

Grep:

$.grep(array,function,invert) 

Vì vậy, trong trường hợp của bạn tôi thà sử dụng grep() được nguyên nhân sử dụng mảng theo cách này là không cần thiết: $(arr).

Tôi cũng giả sử rằng chức năng grep nhanh hơn, vì nó chỉ chấp nhận mảng.

Answer 4

Để những người quan tâm về cách grep Thực hiện chống lại filter tôi đã viết bài kiểm tra này:

TLDR; Grep nhanh gấp nhiều lần.

Script tôi đã sử dụng để thử nghiệm:

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>

Answer 5

@Matas Vaitkevicius, đoạn mã gửi quà lỗi, đây là một điều chỉnh một:

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: Trong firefox, bộ lọc hơi nhanh hơn, trong chrome, điều ngược lại. Về biểu diễn chỉ, bạn có thể sử dụng bất cứ ai.