21.04.15 배열. filter, find, map, reduce

1. 배열.filter();

 

1) filter

filter 걸러낸다
filter 매서드 사용하면 익명함수가 들어간다-> filter(function()) (forEach와 동일)
return

 

v가 30보다 작은 것들만 return을 하게 된다.

뒷 부분은 조건을 만족하지 않으므로 return이 된 값만 두번째 빈 배열 arr2에 담아지게 된다.
이 익명함수는 총 12번 돈다. 끝까지 돌게 되고 return이 되나 안되나의 차이이다.
v에는 배열의 각 요소가 들어간다.

filter의 return 값은 Array 배열이다.

        let arr = [25,26,27,28,29,30,31,32,32,33,34,35,36];
        let arr2 = [];

        arr.forEach((v)=>{
            if(v<30){
                arr2.push(v);
            }
        });
        console.log(arr2);

 

forEach 문 - 하지만 filter보다 가독성이 좋지 않음

반복문을 돌리는 이유 : 걸러내기 위함 

이런 기능을 자주 사용하다 보니 filter라는 기능을 만들어준 것이다.

 

 

 

 

2) forEach 와 push

        arr2 = arr.filter(v=>{
            return v<30;
        });
        console.log(arr2);

직관적으로 무언가를 필터링 하고 싶어한다는 걸 알 수 있음.

 

 

 

 

2. 배열.find();

return 값이 array가 아니다.

한 가지의 원소만 알려준다. 그냥 int 값으로 반환한다.

arr2를 배열로 만들었지만 find로 원소만 찾아서 그 값만 넘겨준다.

 

        let arr = [4,5,8,7,9,3,6,10,2,6];
        let arr2 =[];

        arr2 = arr.find(v=>{
            return v == 6;      // 그냥 int 값으로 반환한다.
        });
        console.log(arr2);

        let count  = 0;
        arr2 = arr.find(v=>{
            count ++;
            //console.log(count);
            return v == 9;
        });

        console.log("count = "+count); // 총 찾아본 횟수 [key]값을 의미한다.

 

 

3. map

 

모든 원소에 모든 값에 변화를 주고 싶을 때 사용함.

= 모든 원소에 동일한 변화를 주고 싶을 때

 

        // 글자 수   3       6        5         10
        let arr = ['foo','mandoo','ingoo','blockchain'];

        // 결과 값을 배열로 줌 - result 라는 배열에 넣어줌
        
        let result = [];

        result = arr.map((v,i)=>{
            return `${v+(i+1)}`;
        });
        console.log(result);

결과

 

 

map 을 어디에 쓸건가? value 값을 가져오고, return 해줄 값을 작성

이 전체를 어느 곳에 넣어줄 건지 result

 

 

       // html 에서 class 이름 뒤에 1234 붙여서 쓸때
        let hero = ['hero','hero','hero','hero','hero'];

        let result2 = [];

        result2 = hero.map((v,i)=>{
            return `${v}${i+1}`;
        });

         // 2. string
        // String.length Array.length

        result3 = arr.map((v)=>{
            return v.length;
        });

        //console.log("result3 = ",result3);

 

 

실습

        /*실습*/

        let txt = ['1','2','3','4','5','6','7','8','9','10','11'];       // 01 02 03 04 05 06 ... 09 10 11
        let result4 = [];

        //String.padStart(a,b) // 첫번째 자리 : 자리수를 몇까지 채울것인가  두번째 자리 : 앞에 뭘 붙일거냐
        // 항상 조건문이 있는 부분은 뭔가 매서드가 존재할 수 있다. - 항상 구글링하기
        // 검색 : 글자앞에 0 붙이기
        
        result4 = txt.map((v)=>{
            return v.padStart(2,0);
        });
        console.log(result4);


        result4 = txt.map((v,i)=>{
            if(i<9){
                return `0${v}`;
            }else{
                return v;
            }
        });
        console.log(result4);

        
        // Question : 어떻게 string 과 int를 비교하는가??
        console.log('1'== 1);
        // 원래는 안되는거임 , == 와 === 의 차이는 ==는 값을 비교하는거고 ===는 변수 안에 있는 타입까지 비교해서 같아야지만 정확한 비교가 됩니다


        result4 = txt.map((v)=>{
            if(v<10){
                return `0${v}`;
            }else{
                return v;
            }
        });
        console.log(result4);

 

 

 

 

4. reduce

 

익명함수, prev

reduce(function(),[])

        arr.reduce((p,v)=>{console.log(p,v)},1);
        arr.reduce((p,v)=>{console.log(p,v); return p; },1);

        

()=>{} 익명합수

'1' 임의값 - 이걸 두번째 인자값이라고 부르는데 이게 첫번째 p에 찍힌다. - 최초에 실행했을때만 뜬다. - 함수안에 return 을 쓰면 반복된다.

임의값에 [] 배열도 넣어줄 수 있다. 이게 p 값이다.

 

        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        let arr3 = ['asdfasdf', 'asdf', 'dfdfdf'];
        let arr2 = [];
        
        
        arr.reduce((p,v)=>{console.log(p,v)},1);
        arr.reduce((p,v)=>{console.log(p,v); return p; },1);
        
        arr2 = arr.reduce((p, v) => {
            // p 는 첫번째 원소값 v는 두번째 원소값
            // 두번째 부터, p 는 결과값으로 변하기 시작한다.
            console.log(p,v);
            return p + v;
            // 이 return 값이 p에 넘어가게 된다.
        });
        console.log(arr2);
        // 1부터 10까지의 합

 

 

map ver / reduce ver

        let hero = ['foo','mandoo','ingoo','blockchain'];
        let result2 = [];

        // map ver
        result2 = hero.map((v, i) => {
            return `${v}${i + 1}`;
        });
        console.log(result2);


        // reduce ver
        result2 = hero.reduce((p,v,i)=>{
            p.push(`${v}${i+1}`);
            return p;
        },[]);
        console.log("reduce 대체",result2);