[jQuery]제이쿼리 배열관련 메서드(each(), map(), grep())

#01 each() or $.each() 
// ex.1) $("요소선택").each(function(매개변수1, 매개변수2){...});
// ex.2) $.each($("요소선택").function(매개변수1, 매개변수2){...});
- 배열에 저장된 문서 객체만큼 메서드가 반복 실행된다. 
- 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다.

#02 map() 
// ex) $.map(Array, function(매개변수1, 매개변수2){...});
- 배열에 저장된 데이터 수 만큼 메서드가 반복 실행된다. 
- 함수에서 반환된 데이터는 배열에 순서대로 저장됨.

#03 grep() 
// ex) $.grep(Array, function(매개변수1, 매개변수2){...});
- 배열에 저장된 데이터 수 만큼 메서드가 반복 실행된다.
- 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며, 그 배열을 반환한다.

 

 

<h1 id="menu1">탐색선택자</h1>
<ul>
  <li>내용1-1</li>
  <li>내용1-2</li>
  <li>내용1-3</li>
  <li>내용1-4</li>
</ul>
<h1 id="menu2">탐색선택자</h1>
<ul>
  <li>내용2-1</li>
  <li>내용2-2</li>
  <li>내용2-3</li>
  <li>내용2-4</li>
</ul>

$(function(){
  let obj = [
    {"area":"서울"},
    {"area":"대구"},
    {"area":"부산"}
  ];//배열

  $(obj).each(function(i,o){
    console.log(i+":",o); //0: {area: '서울'} 1: {area: '대구'} 2: {area: '부산'}
  });
  console.log("=======The end======");

  
  $.each("#menu2 li"), function(i,o){
    console.log(i+":",o);
  };//배열이 아니라서 실행이 안된다.
  console.log("=======The end======");
});

 

console.log의 결과!