[JS] 배열 순환 forEach, map,filter (for in, for of)

배열 순환

: 배열의 순환할 수 있는 구조를 이용하여 특정 기능을 할 수 있는 메서드가 제공

 

array.forEach  (callback function)

: 일반 반복문과 유사한 형태

• 문자와 숫자가 섞여있는 배열에도 사용이 가능
• 기본형

 numArr.forEach( function( elem_value, index, self ) {      
        console.log(index, elem_value, self [ index ]);
    }) ;

elem_value : 요소의 값
index : 배열의 요소값 
self : 배열 (자신 = self)

- 값은 항상 value, index, 배열순으로 입력
- 보통 index와 elem_value만 사용 (elem_value와 self [ index ] 값이 동일하니까!)

<script>

    const numArr = [3, 2, 1, 5, 10, 13, 12];

    const strArr = ['a', 'f', 'g', 'k', 'm'];

    // elem_value, index, array 출력

    console.log('---(elem, index, array)---');

    numArr.forEach(function(elem_value, index, self){

        console.log(index, elem_value, self[index]);

    }) ;

    // elem_value, index만 출력

    console.log('---(elem, index)---');

    strArr.forEach(function(elem_value, index){

        console.log(index, elem_value);

    });

   

    // elem_value만 출력

    console.log('---(elem)---');

    strArr.forEach(function(elem_value){

        console.log(elem_value);

    });

    // 함수를 만들고 forEach(함수명)을 넣어 출력하는 경우

    console.log('---invoke callback function---');

    function printNumber(el, i, arr){

        console.log(i, el, arr[i]);

    }

    numArr.forEach(printNumber);

 

</script>

 

 

array . map ( callback function )

: forEach 수행 + 연산결과를 리턴하여 새로운 배열 생성

<script>

    const numArr = [3, 2, 1, 5, 10, 13, 12];

    const strArr = ['a', 'f', 'g', 'k', 'm'];

    //map : 배열을 리턴

    console.log('---map() invoke callback function---');

    function printNumberMap(el, i, arr){

        return `${i} : ${el} : ${arr[i]}`;

    }

 

 

    const newArr = strArr.map(printNumberMap);

    console.log(newArr);

 

 

    const newStrArr = strArr.map(function(el, i){

        return `${i} : ${el}`;

    });

    console.log(newStrArr);

 

 

</script>

 

array . filter ( callback function )

: map 수행 + 연산결과 리턴시, 비교연산 결과에서 true에 해당하는 값만 리턴

<script>

    const numArr = [3, 2, 1, 5, 10, 13, 12];

    const strArr = ['a', 'f', 'g', 'k', 'm'];

 

    console.log('---filter()---');

    const newNumArr = numArr.filter(function(el,i,arr){

        return !isNaN(el); //el의 값중에 number가 아닌 것

        // return isNaN(el); //el의 값중에 number인것

    });

    console.log(newNumArr);

    </script>

 

 

---

 

for in / for of  배열의 순회 (하나씩 출력)

for in : 객체에 사용

for of : 배열에 사용하는 for문

 

   

 const memberObject = {

            name : 'hong',

            age : 30,

            marride : true,

            favors : ['Baseball', 'Game', 'Movie', 'etc...']

        }

 

       // for(const 임시변수  of 배열){} : 향상된 for문 처럼

        for(const member of people){

            console.log("--여기는 배열의 안--");

            console.log('--배열안의 객체 탐색--');

            for(const keyName in member){

                if(keyName != 'favors'){ //favors는 별도 처리가 필요 (favors는 또 순회해야함!) : 나머지는 일반데이터

                    console.log(member[keyName]); //member["name"]=hong 과 동일의미

                } else {

                    console.log('--favors안의 배열--')

                    //favors의 경우

                    for(const favor of member[keyName]){

                        console.log(favor);

                    }

                }

            }

        }