Jquery 배열 관련 메서드

📖제이쿼리 배열관련 메서드

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

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

선택자로 선택한 요소(배열에 담긴 요소들)을 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다. each메서드 자체가 반복문과 같이 실행한다. 이 메서드는 배열을 직접 건드려서 조작하기 때문에 기존 배열이 유지되어야 할 경우에는 사용하는 것을 지양한다.

[기본형]

1. $("요소선택").each(function(매개변수1, 매개변수2...){자바스크립트 코드})

let obj = [
          {
            area: "서울",
          },
          {
            area: "안양",
          },
          {
            area: "부산",
          },
        ];
        //변수를 선택할때에는 문자열을 사용하지 않고 변수명만 입력한다.
        $(obj).each(function (idx, o) {
          console.log(idx + ":idx" + o.area + ":o");
        });
      });

위와 같이 콘솔창에서 확인해본면 첫번째 매개변수 idx에는 인덱스번호가 두번째 변수 o에는 안에 들어간 내용이 들어간다. 이때 .area 속성명을 뒤에 붙이면 속성값을 알 수 있다.

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

$("요소선택").each(function(){ $(this) })
4.$.each($("요소선택"),function(){ $(this)} )
:배열에 저장된 요소의 개수만큼 메서드를 반복실행한다. 메서드를 실행할때마다 this에는
배열에 저장된 요소가 오름차순으로 대입된다.

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

---

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

$.map()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행한다.
그리고 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열객체를 반환한다.

$.grep()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행하며
인덱스 오름차순으로 배열의 데이터를 불러온다. 메서드의 반환값이 true면 새 배열을
저장하고 반환한다.

배열을 건드리면 안되는 경우에 많이 사용한다.

[기본형]

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

$.map()메서드

map은 총 갯수만큼 반복하기 때문에 모든 객체들을 배열로 내보낸다 그래서 일치하는 a와 false를 두 번 내보낸다.

$.grep()메서드

grep메서드는 true인 요소만 내보낸다.

---

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

$.inArray()메서드는 배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스 번호를 반환한다.$.isArray()메서드는 지정한 데이터가 배열 객체면 true를, 배열이 아니면 false를 반환한다.
$.merge()메서드는 두 배열 객체를 하나의 객체로 묶는다.

[기본형]

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

index()메서드

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

[기본형]

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