jquery - 배열 관련 메서드

*each()/$.each() 메서드

- 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져옴

// 기본형

1.
$("요소 선택").each(function(매개변수1, 매개변수2) {})
$.each($("요소 선택"), function(매개변수1, 매개변수2) {})

----------------------------------------------------------

2.
$("요소 선택").each(function() { $(this) })
$.each($("요소 선택"), function() { $(this) })

1. 번의 코드는 배열에 저장된 요소의 개수만큼 메서드 반복 실행. 실행때마다 매개변수1, 2에는 배열에 저장된 요소와
   인덱스의 값이 배열에 오름차순으로 대입.
2. 번의 코드는 배열에 저장된 요소의 개수만큼 메서드를 반복 실행. 실행때마다 $(this)에는 배열에 저장된 요소가
   오름차순으로 대입.

<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>


$(function(){
    var obj = [
        {"area":"서울"},
        {"area":"부산"},
        {"area":"전주"}
    ]
// ---------------------------------------------------

    $(obj).each(function(i, o) {
        console.log(i + ":", o);
    });
    
// ---------------------------------------------------
    console.log("====The End1====");

    $.each($("#menu2 li"), function(i, o) {
        console.log(i + ":", o);
    });
    
// ---------------------------------------------------  
    console.log("====The End2====");

    $.each($("#menu2 li"), function(i){
        console.log(i + ":", $(this));
    });
});


결과

0: Object { area: "서울" }
1: Object { area: "부산" }
2: Object { area: "전주" }

====The End1==== exerci.js:30:13

0: <li>
1: <li>
2: <li>

====The End2==== exerci.js:35:13
0: Object { 0: li, length: 1, selector: "", context: li }
1: Object { 0: li, length: 1, selector: "", context: li }
2: Object { 0: li, length: 1, selector: "", context: li }


설명
0, 1, 2: Object { area: "도시" }에서는 객체의 개수만큼 메서드를 반복 실행.
그때마다 배열에 저장된 객체에 오름차순으로 접근.
매개변수 i, o에는 배열의 인덱스 값과 객체가 대입됨


0, 1, 2: <li>에서는 객체 수만큼 반복 실행하고 오름차순 접근.
매개변수 i, o에는 배열의 인덱스 값과 객체가 대입됨
다른점은 #menu li 로 지정해 있음.


0, 1, 2: Object { 0: li, length: 1, selector: "", context: li }에서는
선택한 요소만큼 메서드를 반복 실행.
배열에 저장된 요소는 인덱스 오름차순으로 $(this)에 반환.

 

 

 

*map()/$.grep() 메서드

1. map()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행.
   메서드에 반환된 데이트는 새 배열에 저장되고 그 배열 객체를 반환.
2. $.grep()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행.
   인덱스 오름차순으로 배열의 데이터를 불러옴.
   메서드의 반환값이 true면 데이터가 새 배열에 저장되고 배열을 반환함.

$(function(){
    var arr1 = [
        {"area":"서울", "name":"무대리"},
        {"area":"부산", "name":"홍과장"},
        {"area":"서울", "name":"빅마마"}
    ]
    
    
    var arr2 = $.map(arr1, function(a, b) {            
        if (a.area == "서울") {
            return a;
        }
    });

    console.log(arr2);
    console.log("==== First End ====");
    
    var arr3 = $.grep(arr1, function(a, b) {
        if (a.area == "서울") {
            return true;
        } else {
            return false;
        }
    });
    console.log(arr3);
    console.log("==== Second End ====");
});


설명

첫번째 (.map())

var arr2 = $.map(arr1, function(a, b)
if (a.area == "서울") return a;

위를 풀어보면

arr1에 있는것 중 function파라미터 a (Object) b (indexNumber)
if문은 a.area == "서울" 즉, a(object)에 있는 area가 서울과 같으면 참이 되고 
return a;  a에 반환 된다.
실행되고 if에 대한 값이 반환 된 후 새로운 배열 arr2에 저장되고 새롭게 가공된 객체 배열을 반환

즉, 
(2) […]
0: Object { area: "서울", name: "무대리" }
1: Object { area: "서울", name: "빅마마" }
length: 2

--------------------------------------------------------

두번째 (.grep())
var arr2 = $.map(arr1, function(a, b)
if (a.area == "서울"){ return true } else { return false } 

arr1에 있는것 중 function 파라미터 a (Object) b (indexNumber)
if (a.area == "서울"){ return true } 참일때 true 반환되고,
else { return false } 아닐때 false 반환
반환된 데이터가 true면 인덱스 오름차순으로 데이터를 새 배열에 저장하고
새롭게 가공된 배열 객체를 반환함.

즉,
(2) […]
0: Object { area: "서울", name: "무대리" }
1: Object { area: "서울", name: "빅마마" }
length: 2

-------------------------------------------------------

결과
Array [ {…}, {…} ]

==== First End ==== 

Array [ {…}, {…} ]

==== Second End ====