Grep vs Filter ใน jQuery?

ฉันสงสัยเกี่ยวกับความแตกต่างระหว่าง 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);
});

ในทั้งสองสถานการณ์ฉันยังคงสามารถเข้าถึงอาร์เรย์เดิมได้ ...

แล้ว ... ต่างกันตรงไหน?

ทั้งสองทำงานในลักษณะที่คล้ายกัน แต่แตกต่างกันในการใช้งาน

ฟังก์ชันตัวกรองมีไว้เพื่อใช้กับองค์ประกอบ html และด้วยเหตุนี้จึงเป็นฟังก์ชัน chainable ที่ส่งคืนวัตถุ jQuery และยอมรับตัวกรองเช่น ": even", ": odd" หรือ ": visible" เป็นต้นคุณสามารถ ' t ทำเช่นนั้นด้วยฟังก์ชัน grep ซึ่งมีไว้เพื่อเป็นฟังก์ชันยูทิลิตี้สำหรับอาร์เรย์

ตัวกรองเป็นส่วนหนึ่งของ jQuery.fn ดังนั้นจึงมีเป้าหมายที่จะใช้กับตัวเลือก$('div').filterโดยที่ grep เป็นวิธีการเครื่องมือ jQuery ( jQuery.grep)

ความแตกต่างในการใช้งาน:

กรอง:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

ดังนั้นในกรณีของคุณฉันค่อนข้างจะใช้grep()เพราะการใช้อาร์เรย์ด้วยวิธีนี้ไม่จำเป็น:$(arr)เพราะใช้อาร์เรย์วิธีนี้ไม่จำเป็น:

ฉันยังคิดว่าgrepฟังก์ชันนั้นเร็วกว่าเพราะยอมรับเฉพาะอาร์เรย์เท่านั้น

สำหรับผู้ที่สนใจเกี่ยวกับวิธี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>

@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 ตัวกรองจะเร็วกว่าเล็กน้อยใน chrome ซึ่งตรงกันข้าม เกี่ยวกับการแสดงเท่านั้นคุณสามารถใช้ใครก็ได้