jQuery - 배열 메소드

배열 관련 메소드

 

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

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

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

$("요소 선택").each(function)

$.each($("요소 선택").function)

<script>
        
        $(() => {
            console.clear();
            // 1. 객체를 원소를 가지는 배열 선언
            var arr = [
                { area : "서울"},      // 리터럴 방식의 객체
                { area : "부산"},      // 리터럴 방식의 객체
                { area : "전주"}       // 리터럴 방식의 객체
            ];

            // 2. 배열의 순회 using $.each 메소드
            $(arr).each(function (index, value) {       // ES6: Template String
                console.log(`${index}:`, value);        // $.each
            });

            // $(arr).each(function (index, value) {
            //     console.log( index + ":" , value);
            // });

            console.log("==== The End 1 ====");

            $.each($("#menu2 li"), function(index, value) {
                console.log(`${index}:`, value);
            });

            console.log("==== The End 2 ====");

            $.each($("#menu2 li"), function (index) {
                console.log('1. this:', this);
                console.log(index + ":", $(this));   // $(this): 배열의 원소

                $(this).css("color", "blue");
            });
        }); //.jq
        
    </script>

 

 

 $.map() 메소드

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

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

$.map(Array, function)

    <script>
        
        // $.map() 메소드 : 원래의 값 -> 새로운 유형의 값으로 매핑(사상)
        $(() => {
            var arr1 = [
                { "area": "서울", "name": "무대리" },
                { "area": "서울", "name": "홍과장" },
                { "area": "부산", "name": "박사장" }
            ]; // 객체를 원소로 가지는 배열

            // 객체 -> 문자열로 매핑(사상)
            var arr2 = $.map(arr1, function (element, index) {
                if (element.area == "서울") {
                    return element;
                }
            }); // $.map
            console.log(arr2);
            
            //응용 var Arr = [ 1, 2, 3, 4, 5, 6]; 에서 짝수만 추출하기
            var Arr = [1, 2, 3, 4, 5, 6];
            var newArr = $.map(Arr, function(e) {
                if (e%2 == 0) {
                    return e;
                }
            });
            console.log(newArr);        
        }); //.jq
        
    </script>

 

$.grep() 메소드

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

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

$grep(Array, function)

arr 배열에서 3의 배수인 배열 원소만 가져와서 newArr에 저장하기

 

index() 메소드

- 선택자로 요소를 먼저 선택 후, 지정한 요소의 인덱스 정보를 가져옴

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