카테고리 없음

JQuery(배열관련메소드)

NYoun 2020. 5. 20. 16:43

배열관련 메소드

  배열관련 메소드의 종류

종류

사용법

설명

each()/$each()

$(“요소 선택”).each(function)

$each($(“요소 선택”).function)

배열에 저장된 문서 객체만큼 메소드가 반복 실행.

배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다.

$.map()

$.map(Array, function)

배열에 저장된 데이터 수만큼 메소드가 반복 실행.

함수에서 반환된 데이터는 새 배열에 순서대로 저장. 새로 저장된 배열 객체를 반환.

$.grep()

$.grep(Array, function)

배열에 저장된 데이터 수만큼 메소드가 반복 실행.

반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환.

$.inArray()

$.inArray(data, Array, start index)

배열안에서 데이터를 찾는다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환하고, 찾지 못하면 -1을 반환.

start index의 값을 지정하면 해당 위치부터 데이터를 찾는다.

$.isArray()

$.isArray(object)

입력한 객체가 배열 객체라면 true를 아니면 false를 반환

$.merge()

$.merge(Array 1, Array 2)

인자값으로 입력한 2개의 배열 객체를 하나로 그룹화

inde()

$(“요소 선택”).index(“지정 요소 선택”)

선택자로 요소를 먼저 선택.

그런 다음 지정한 요소의 인덱스 정보를 가져온다.

 each()/$.each()메소드

  선택자로 선택한 요소(문서 객체)는 배열에 순서대로 저장된다.

  이때 each()와 $.each()메소드는 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다.

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

  1,2는 배열에 저장된 요소의 개수만큼 메소드를 반복 실행한다. 메소드를 실행할 때마다 매개변수 1, 매개변수2에는

  배열에 저장된 요소와 인덱스의 값이 배열에 오름차순으로 대입된다.

  3,4는 배열에 저장된 요소의 개수만큼 메소드를 반복 실행한다. 메소드를 실행할 때마다 $(this)에는 배열에 저장된

  요소가 오름차순으로 대입된다.

 

  다음 예제는 배열에 저장된 요소를 each(), $.each()메소드를 사용해 순서대로 선택한다.

  그 다음 인덱스 정보를 콘솔 패널에 출력한다.

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

    $(obj).each(function(i,o){
      //obj 배열의 데이터 개수만큼 함수가 실행.
      //메소드가 반복 실행될 때마다 배열에 저장된 객체에
      //오름차순으로 접근하고 매개변수 i와 o에는 배열의 인덱스 값과
      //객체가 대입된다.
      console.log(i+":", o);
    });
    console.log("=====The End======");

    $.each($("#menu2 li"), function(i,o){
      //선택한 요소만큼(li) 메소드를 반복 실행.
      //배열에 저장된 요소는 인덱스 오름차순으로 $(this)에 반환된다.
      console.log(i+":",o);
    });
    console.log("=====The End2======");

    $.each($("#menu2 li"),function(i){
      console.log(i+":", $(this));
    });
  });
</script>
</head>
<body>
  <h1>탐색 선택자</h1>
   <ul id="menu 1">
    <li>내용1-1</li>
    <li>내용1-2</li>
    <li>내용1-3</li>
   </ul>
   <ul id="menu 2">
    <li>내용2-1</li>
    <li>내용2-2</li>
    <li>내용2-3</li>
   </ul>
</body>

$.map()/$.grep() 메소드

  $.map() 메소드는 배열에 저장된 데이터 수만큼 메소드를 반복 실행한다.

  그리고 메소드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환한다.

  $.grep() 메소드는 배열에 저장된 데이터 수만큼 메소드를 반복 실행하며 인덱스 오름차순으로 배열의 데이터를

  불러온다. 메소드의 반환값이 true면 데이터가 새 배열에 저장되고 배열을 반환한다.

1. $.map()메소드
$.map(Array, function(매개변수1, 매개변수2){
    return 데이터;
});

2. $.grep()메소드
$.grep(Array, function(매개변수1, 매개변수2){
    return [true|false];
});

  1은 배열에 저장된 요소만큼 메소드를 반복 실행한다.

  메소드가 실행될 때마다 매개변수 1, 매개변수2에는 배열의 데이터와 인덱스 값이 인덱스 오름차순으로 대입된다.

  반환된 데이터는 새 배열에 저장되고 새롭게 가공된 배열 객체를 반환한다.

  2는 배열에 저장된 요소만큼 메소드를 반복실행한다. 메소드가 실행될 때마다 매개변수 1, 매개변수2에는 배열에

  데이터와 인덱스 정보가 인덱스 오름차순으로 대입된다. 반환된 데이터가 true면 인덱스 오름차순으로 데이터를

  새 배열에 저장하고 새롭게 가공된 배열 객체를 반환한다.

 

  다음 예제는 $.map(), $.grep() 메소드를 사용해 배열에 저장된 객체 중 "area"의 속성값이 "서울"인 객체만 선택해

  새 배열로 가공한다. 그 다음 변수에 참조시키고 새롭게 가공된 두 배열의 객체를 콘솔 패널에 출력한다.

<script>
  $(function(){
    var arr1 = [{
      "area":"서울"
      "name":"무대리"
    },{
      "area":"부산"
      "name":"홍과장"
    },{
      "area":"대전"
      "name":"박사장"
    },{
      "area":"서울"
      "name":"빅마마"
    }]

    var arr2 = $.map(arr1, function(a,b){
      if(a.area == "서울"){
        return a;
      }
    });
    //배열에 저장된 객체 수만큼 메소드를 반복 실행.
    //메소드가 반복 실행될 때마다 배열에 저장된 객체에
    //인덱스 오름차순으로 접근한다.
    //매개변수 a,b에는 배열의 객체와 인덱스 값이 대입된다.
    //객체의 "area"속성이 "서울"이면 새 배열에 객체(매개변수a)를 저장하고
    //새롭게 가공된 배열 객체를 반환한다.
    console.log(arr2);
    console.log("======first End=====");

    var arr3 = $.grep(arr1, function(a,b){
      if(a.area == "서울"){
        return true;
      }else{
        return false;
      }
      //배열의 데이터 수만큼 메소드가 실행된다.
      //객체의 속성값이 '서울'이면 true를 반환한다.
    });
    console.log(arr3);
    console.log("=====Second End=====");
  });
</script>

$.inArray()/$.isArray()/$.merge()메소드

  $.inArray() 메소드는 배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스 값을 반환한다.

  $.isArray() 메소드는 지정한 데이터가 배열 객체면 true를 아니면 false를 반환한다.

  $.merge() 메소드는 두 배열 객체를 하나의 객체로 묶는다.

1. $.inArray(data, Array, start index)
2. $.isArray(object)
3. $.merge(Array1, Array2)

  1은 배열에 저장된 데이터 중 지정한 데이터를 인덱스 오름차순으로 찾아 먼저 찾은 데이터의 인덱스 값을 반환한다.

  2는 지정한 객체가 배열 객체면 true를 아니면 false를 반환한다.

  3은 두 배열 객체를 하나의 배열 객체로 묶는다.

 

  다음 예제에서는 $.inArray(), $.isArray()메소드를 사용해 배열 객체의 정보를 구하고 $.merge()메소드로는

  두 배열 객체를 하나의 배열 객체로 묶는다.

<script>
  $(function(){
    var arr1 = ["서울", "대전", "부산", "전주"];
    var arr2 = ["한국", "미국", "일본", "중국"];
    var obj = {
      "name":"정부장",
      "area":"서울"
    }

    var idxNum = $.inArray("부산", arr1);
    console.log(idxNum);

    var okArray1=$.isArray(arr1);
    var okArray2=$.isArray(obj);
    console.log(okArray1);//배열객체면 true
    console.log(okArray2);//배열객체가 아니면 false

    $.merge(arr2, arr1);
    console.log(arr2);//["한국", "미국", "일본", "중국", "서울", "대전", "부산", "전주"]
  });
</script>

index()메소드

  $.index()메소드는 지정 선택 요소를 찾아서 인덱스 값을 반환한다.

  다음은 index()메소드의 기본형이다.

$("요소 선택").index("지정 선택 요소");

  다음은 index()메소드를 사용한 예제이다.

<script>
  $(function(){
    var idxNum=$("li").index($("#list3"));
    console.log(idxNum); //2
  });
</script>
</head>
<body>
  <h1>배열 관련 함수</h1>

   <ul>
    <li>내용1</li>
    <li>내용2</li>
    <li id="list3">내용3</li>
    <li>내용4</li>
   </ul>
</body>

 

(참고 : do it 자바스크립트+제이쿼리 입문)