본문 바로가기
프로그래밍/jQuery

jQuery.grep(), 배열 요소를 찾아 걸러내기

by zoo10 2012. 7. 2.

jQuery.grep()

원문 링크 http://api.jquery.com/jQuery.grep/

jQuery.grep( array, function(elementOfArray, indexInArray) [, invert] )Returns : Array

개요 : 배열의 요소를 찾아 필터 합니다. 원본 배열에 영향을 주지 않습니다.

  • jQuery.grep( array, function(elementOfArray, indexInArray) [, invert] )
  • array 배열
  • function(elementOfArray, indexInArray) 배열 아이템 수 만큼 반복이 진행됨. 첫번째 인자는 배열 요소이고 두번째 인자는 인덱스. 이 함수는 Boolean 값을 반환.
  • invert "invert"가 false 또는 세팅하지 않으면, 콜백 함수에서 true가 발생하는 결과의 반대값을 반환하고, 만일 "invert"가 true 라면 콜백 함수에서 false 결과의 반대값을 반환

$.grep() 함수는 배열 요소를 조건에 따라 필터링하여 제거 합니다. 이 조건은 함수로 구성되고 배열의 요소와 인덱스를 인자로 갖습니다. 즉, 특정 로직에 의해 true 가 되는 결과들만 반환되는 것입니다.

예 제  
원본 배열을 특정 조건으로 필터링 합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <p></p>
  <span></span>
  
<script>
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$("div").text(arr.join(", "));

arr = jQuery.grep(arr, function(n, i){
  return (n != 5 && i > 4);
});
$("p").text(arr.join(", "));

arr = jQuery.grep(arr, function (a) { return a != 9; });
$("span").text(arr.join(", "));

</script>

</body>
</html>

미리보기

각 테스트 함수들을 잘 보시구요. 어떻게 결과가 나오는지를 확인하시면 됩니다. 잘 보면 보이네요. 숫자가 많아 헷갈리긴 하지만요. grep 함수는 배열 필터링 함수입니다.

 

예 제   zero 보다 큰 요소들만 반환합니다.

$.grep( [0,1,2], function(n,i){
   return n > 0;
 });

 //Result : [1, 2] 

 

예 제   zero 보다 크지 않은 요소들만 반환합니다.

$.grep( [0,1,2], function(n,i){
    return n > 0;
},true);

//Result : [0] 

invert 인자가 true로 세팅되면 결과의 반대가 반환됩니다. 위의 예제와 이 예제의 차이는 true 가 있느냐 없느냐의 차이뿐입니다. 사실 헷갈리는 사용법이네요.

 

배열 내에 없애고 싶은 요소가 있다면 이 함수를 사용해야 겠네요. 음.. 쓸모 있는 함수인 것 같습니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.