[제이쿼리] -배열 관련 매서드 > ★each , $.each()매서드 / ★$.map(), $.grep()메서드

 제이쿼리 배열 관련 매서드
 자바스크립트와 제이쿼리에는 배열 안을 탐색하는 다양한 메서드들이 있다. 

---

1. each / $.each()매서드 ★

선택자로 선택한 요소(배열에 담긴 요소들)을 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다. 

(요소들의 갯수만큼 반복하며 가져온다.)

each매서드는 인수로 함수를 받는다. 함수 안에는 매개변수가 들어가는데, 
* 이때 첫번째 매개변수에는 배열의 인덱스 번호를 받아오고,

두번째 매개변수에는 인덱스 번호가 참조하고 있는 내용을 받아온다.

*each는 배열 자체를 변환시킨다.

기존 배열이 유지되어야한다면 each를 사용하면 안된다. 

[기본형]
1. $('요소선택').each(function(매개변수1, 매개변수2...){ 자바스크립트 코드}); 
2. $.each($('요소선택'),function(매개변수1, 매개변수2...){ 자바스크립트 코드});  
: 1,2는 배열에 저장된 요소의 갯수만큼 메서드를 반복 실행한다. 메서드를 실행할 때마다 매개변수1, 매개변수2에는 배열에 저장된 요소와 인덱스의 값이 오름차순으로 대입된다. 
            
3. $('요소선택').each(function(){ $(this) })
4. $.each($('요소선택'),function(){ $(this) })  
: 배열에 저장된 요소의 갯수만큼 매서드를 반복 실행한다. 매서드를 실행할 때마다 this에는 배열에 저장된
 요소가 오름차순으로 대입된다.

기본형 1,3번은 자바스크립트에서 쓸 수 있다. 그땐 $()를 빼야한다 ($표시가 제이쿼리라는 뜻이기에) 그리고 앞에 태그를 쿼리선택자나 겟 선택자로 선택해줘야함.

 <ul id="menu1">

      <li>내용1-1</li>

      <li>내용1-2</li>

      <li>내용1-3</li>

    </ul>

    <ul id="menu2">

      <li>내용2-1</li>

      <li>내용2-2</li>

      <li>내용2-3</li>

    </ul>

위에서 o는 오브젝트라는 사실만 알려준다 그 안의 내용을 보고 싶다면,

(첫번째 매개변수 idx에는 인덱스번호를 받아오고, 두번째 매개변수에는 인덱스 번호가 참조하고 있는  내용(위에선 오브젝트)을 받아오는 것을 볼 수 있다. )

 

+ *변수를 선택할 땐 " " 문자열에 담지 않는다. $(obj) /   $( 'obj' ) -> 이렇게 쓰면 태그로 인식함 

.속성으로 o.area로 해줘야 안쪽 내용을 볼 수 있다. 

---

this는 저렇게 나오게 된다.

---

   2. $.map( ) ★ , $.grep( )메서드  

 

 - ★$.map()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행한다.
그리고 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환한다.
$.map()메서드의 첫번째 매개변수는 배열의 데이터(객체)가 순서대로 대입되고,
두번째 매개변수에는 인덱스 번호가 대입된다. (each메서드와 반대)(자바스크립트에서도 많이 쓴다.)

- $.grep()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행하며 인덱스 오름차순으로 배열의
데이터를 불러온다. 메서드의 반환값이 true면 새 배열을 저장하고 반환한다. false면 아무런 값도 우리에게 내어주지 않는다. 

$.map(), $.grep()메서드는 기존 배열에 영향을 주지 않고 기존 배열 안을 탐색하면서 
필요한 데이터를 필터링하기 위해 사용한다. 

 [기본형]
1. $.map(array, function(매개변수1, 매개변수2){ return 데이터; })

2. $.grep(array, function(매개변수1, 매개변수2){ return [true/false]; })

 array(배열) 자리에는 변수가 올 수 있다. 

 

데이터를 뱉어줘야하기때문에 retrun이 들어간다. 

그리고 뱉은 데이터를 받아줘야하기때문에 변수 안에 넣어준다. 

---

< map >
.map은 배열 자체를 변화 시키진 않는다. 

기존 배열은 그대로 두고 새로 데이터를 가공하고 싶을 때 map을 사용한다. 

기존배열 arr1을 확인해보면 그대로 남아있는 것을 볼 수 있다. 

뱉은 데이터를 담아줘야하니깐 변수 result1에 담아준다. 

배열 안을 한개씩 검사하니깐 오른쪽과 같은 결과가 나오게 된다. 

 

---

< grep매서드 >

grep매서드는 true인 데이터만 반환하기에 조건문과 같은 하나만 반환해주는 것을 볼 수 있다. (false인 데이터는 반환하지 않는다)

* 가공된 것만 받을려면 grep메서드를 사용해야한다.