[JavaScript] 6-2. 배열 반복문

9_1) 배열 반복문(향상된 반복문, 배열을 비우는 방법)

 

■ 06_배열.html

    <h4>9_1) 배열 반복문</h4>

    <script>
        let arr = ["소금", "삼결살", "후추", "쌈장"];

        // 기본 반복문
        for(let i=0; i<arr.length; i++){
            console.log(arr[i]);
        }

        // 향상된 반복문
        for(let value of arr){  // of문 (배열에 사용)
            console.log(value);
        }

        for(let key in arr){ // in문(객체에 사용)
            console.log(arr[key]);
        }

        // 배열을 비우는 방법
        arr.length = 0; // 내부데이터도 전부 날라감
        
        let arr2 = [1,2,3,4,5];
        arr2.length = 2; // [1,2]
    </script>

 

 

 

▶ 배열을 비우는 방법

arr.length = 0;   => 내부데이터도 전부 날라간다.

 

 

 

9_2) 배열을 통한 반복작업(forEach)

forEach 문은 아래처럼 여러방법으로 사용할 수 있다.

 

■ 06_배열.html

    <script>
        const forEachTest = () => {

            const arr = [1,2,3,4,5];
            
            // 방법1
            arr.forEach( function( item, index, array ){
                console.log(`${item}은 ${array}의 ${index}에 위치해 있습니다.`);
            })

            // 방법2
            arr.forEach( ( item, index, array ) => {
                console.log(`${item}은 ${array}의 ${index}에 위치해 있습니다.`);
            })

            // 방법3
            const fnTest = (item, index, array) => {
                console.log(`${item}은 ${array}의 ${index}에 위치해 있습니다.`);
            }

            arr.forEach(fnTest);

            // 배열의 요소를 통해서도 사용가능
            // [1,2,3,4,5,6,7].forEach(alert);
        }
    </script>

 

▶ forEach문 만드는 방법

배열명.forEach(요소명 => {

        실행문( 요소명)

});

 

☞ 요소명은 내가 정할 수 있으며, 그 배열이 가지고 있는 요소들을 한 번씩 반환하여 반복을 시켜주게 되는것이다.

☞ item : 안에 있는 객체

☞ index : 현재 반복문을 진행하고 있는 index

☞ array : 배열

 

 

 

 

 

10) 배열 탐색(find, filter)

 

■ 06_배열.html

    <h4>10) 배열 탐색(find, filter)</h4>
    <p>
        객체로 이루어진 배열에서 내가 원하는 값만 찾을 때 사용
    </p>

    <script>
        function findFilterTest(){
            let users = [
                {id:'whale', name:'고래'},
                {id:'whale2', name:'고래2'},
                {id:'whale3', name:'고래3'},
                {id:'whale4', name:'고래4'},
            ];

            let mkm;

            // find 함수를 사용해서 id값이 whale인 user 객체 찾기

            mkm = users.find( function(item, index, array) {
                // id 값이 whale과 같은 요소
                if(item.id == 'whale'){
                    return true;
                }

                // return item.id == 'whale';   // 위와 같은 방법
            });

            console.log(mkm);

            let filterArray;  // undefined


            // whale 문자열이 포함된 모든 요소 반환
            // 방법1
            // filteredArray = users.filter( function(item, index, array) {
            //     if(item.id.includes('whale2')){
            //         return true;
            //     }
            // })


            // 방법2
            // {} 생략가능
            filteredArray = users.filter( (item, index, array) => item.id.includes('whale2'))

            console.log('filteredArray', filteredArray);
        }
    </script>

 

▶ find

mkm = users.find( function(item, index, array) {                 // id 값이 whale과 같은 요소                 if(item.id == 'whale'){                     return true;                 }                 // return item.id == 'whale';   // 위와 같은 방법             });             console.log(mkm);

 

☞ 내가 원하는 조건을 만족하는 경우, 바로 item을 반환하고 반복문은 바로 종료된다.

☞ 해당 요소의 id 값이 출력됨

 

 

 

 

방법 ①

filteredArray = users.filter( function(item, index, array) {                 if(item.id.includes('whale')){                     return true;                 }             })

 

방법②

// {} 생략가능             filteredArray = users.filter( (item, index, array) => item.id.includes('whale'))             console.log('filteredArray', filteredArray);

☞ 요소의 id가 whale인 포함된 값을 찾아 index가 끝날때까지 계속 반복문이 돌아간다.

☞ 해당하는 요소의 id 값들을 모두 출력한다.

 

 

 

 

11) 배열 변형(map)

: 현재 배열을 바탕으로 각 요소에 함수를 호출하여 변경된 결과값을 반환함

 

■ 06_배열.html

    <script>
        function mapTest(){
            // 기본형태
            const result = [1,2,3,4,5].map( function(item, index, array){
                return item * index;   // [0, 2, 6, 12, 20]
            })

            console.log(result);
        }
    </script>

 

▶ map

☞ map함수는 return 되는 값들을 map함수 내부의 [] 에 담아서 반환해준다.(반복이 끝날때 반환해줌)