Grep vs Filter trong jQuery?

Tôi đã tự hỏi về sự khác biệt giữa Grep và Filter:

Bộ lọc:

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

Grep:

Tìm các phần tử của một mảng thỏa mãn một chức năng lọc. Mảng ban đầu không bị ảnh hưởng.

đồng ý.

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ũng có thể là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 trường hợp, tôi vẫn có thể truy cập vào mảng ban đầu ...

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

Cả hai đều hoạt động theo những cách tương tự nhưng chúng khác nhau về cách sử dụng.

Hàm bộ lọc được thiết kế để được sử dụng với các phần tử html và đó là lý do tại sao nó là một hàm có thể thay thế trả về một đối tượng jQuery và nó chấp nhận các bộ lọc như ": Even", ": retail" hoặc ": display", v.v. Bạn có thể ' t làm điều đó với hàm grep, được dự định là một hàm tiện ích cho mảng.

Bộ lọc là một phần của jQuery.fn vì vậy mục đích của nó là được sử dụng với bộ chọn $('div').filtertrong đó grep là một phương thức công cụ jQuery ( jQuery.grep)

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

Bộ 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()bởi vì sử dụng mảng theo cách này là không cần thiết: $(arr).

Tôi cũng cho rằng grepchức năng đó nhanh hơn, vì nó chỉ chấp nhận các mảng.

Đối với những người quan tâm đến hiệu suất grepchống lại như thế nào, filtertôi đã viết bài kiểm tra này:

TLDR; Grep nhanh hơn nhiều lần.

Tập lệnh 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>

@Matas Vaitkevicius, đoạn mã được đăng có lỗi, đây là đoạn mã đã sửa:

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 nhanh hơn một chút, trong chrome thì ngược lại. Chỉ liên quan đến biểu diễn, bạn có thể sử dụng bất kỳ ai.