[jQuery] $.grep 과 $.map

$.grep 과 $.map

이번 글에서는 jQuery에서 제공하는 두 개의 배열 유틸리티인 $.grep ()과 $.map () 사이의 차이점에 대해 포스팅 할 것입니다. 

사실 $.grep 함수는 배열을 필터링하고 필터링 된 배열을 반환하지만, $.map은 단순히 배열의 각 항목에 함수를 적용하여 수정 된 배열을 반환합니다. 

우선,이 기능들은 매우 다릅니다. 주요 차이점은 다음과 같습니다.

$.grep()

$.grep(array, function(index, value) {
 
  //...
 
});

첫 번째 매개변수인 array의 경우에는 필터링을 할 배열입니다.

두 번째 매개변수인 index는 각 배열 항목의 숫자 인덱스입니다.

세 번째 매개변수인 value는 배열의 각 항목의 실제 값입니다.

$.map()

$.map(array, function(value, index) {
 
  //...
 
});

첫 번째 매개변수인 array는 항목에 함수를 적용하려는 배열입니다.

두 번째 매개변수인 value는 배열의 각 항목에 대한 실제 값입니다.

세 번째 매개변수인 index는 각 항목의 숫자 색인입니다.

언제 사용하는가?

배열에 필터를 적용하려면 $.grep()을 사용합니다. 

대신 우리는 각 배열의 항목에 함수를 적용 할 때 $.map()을 사용합니다. 

예를 들어, 순서가 지정되지 않은 목록이있는 경우에는 아래와 같습니다.

<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

$.grep()을 사용하여 짝수를 포함하는 목록 항목 만 필터링 할 수 있습니다.

var lis = $('#test li').get();
 
var grep = $.grep(lis, function(index, value) {

  return (lis[value].firstChild.nodeValue % 2 == 0);
  
});

return문은 실제로 대괄호 안에 지정된 필터를 적용합니다.

대신 배열에 변경 사항을 적용하고 수정 된 배열을 반환하려면 아래와 같이 $.map()을 사용할 수 있습니다.

예를 들어 각 항목의 텍스트를 숫자로 변환하고 각 항목의 색인에 해당 값을 합할 수 있습니다.

var map = $.map(lis, function(value, index) {
    
  return ('<li>' + (new Number(value.firstChild.nodeValue) + index) + '</li>');
 
});

함수 블록 내에서 사용되는 구문은 $.grep()에서 사용되는 구문과 동일합니다. 

유일한 차이점은 필터링 된 배열이 아니라 수정 된 배열을 반환한다는 것입니다. 

아래에서 예제를 보실 수 있습니다.

http://pastehtml.com/view/1dpxsin.html

출처 : http://onwebdev.blogspot.com/2011/03/jquery-grep-and-map-example-and-syntax.html