jQuery의 Grep 대 필터?

Question 1

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

두 경우 모두 원래 어레이에 액세스 할 수 있습니다.

그래서 ... 차이점은 어디입니까?

Question 2

둘 다 비슷한 방식으로 작동하지만 사용법이 다릅니다.

필터 함수는 html 요소와 함께 사용하기위한 것이므로 jQuery 객체를 반환하고 ": even", ": odd"또는 ": visible"등과 같은 필터를 허용하는 체인 가능한 함수입니다. t는 배열을위한 유틸리티 함수 인 grep 함수를 사용하여 수행합니다.

Question 3

필터는 jQuery.fn의 일부이므로 $('div').filtergrep이 jQuery 도구 메서드 인 선택기와 함께 사용하는 것이 목표입니다 ( jQuery.grep).

Question 4

사용법의 차이 :

필터:

$(selector).filter(selector/function)

Grep :

$.grep(array,function,invert)

따라서 귀하의 경우에는 grep()배열을 사용하는 것이 불필요 하기 때문에 차라리 사용 $(arr)합니다.

또한 grep함수가 배열 만 받아들이 기 때문에 더 빠르다고 생각 합니다.

Question 5

방법에 관심있는 것들에 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>

스 니펫 확장

Question 6

@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 : 파이어 폭스에서는 필터가 약간 더 빠르며 크롬에서는 그 반대입니다. 공연에 관해서는 누구나 사용할 수 있습니다.