[java script] Array 메서드 indexOf find map filter reduce

Array.prototype.indexOf()

 

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환

 

arr.indexOf(searchElement[, fromIndex])

searchElement 는 배열에서 찾을 요소

fromIndex 는 검색을 시작할 색인으로 생략할 수 있다. 

 

Array.prototype.find()

 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환,  그런 요소가 없다면 undefined를 반환

 <script type="text/javascript"> 
        let arr=[1,2,5,87,9,0,4,77,8]; 
        let arr2=[]; 
        //find는 return값이 배열이 아니다. 
        //한가지 원소만 찾아준다. 
        arr2= arr.find( v=>{ 
            return v==3; 
        });

        console.log(arr2); 

        let cnt=0; 

        arr2= arr.find(v=>{ 
            cnt++; 
            return v==3;
        });

        console.log('cnt',cnt)//키값. 

    </script>

 

 

Array.prototype.map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

 <script type="text/javascript">
    //map 모든 원소에 모든 값에 변화를 주고 싶을 때; 
        let arr = [ 'foo','goooo','hooooooooooooo'];
        let result=[];  
        result = arr.map((v,i)=>{
            return `${v+(i+1)}`; 
        });

        console.log(result); 

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

        console.log(arr2); 

        let arr3=[]; 
        arr.forEach((v)=>{
            arr3.push(v.length);
        })
        console.log(arr3); 

 

Array.prototype.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

<script type="text/javascript">

    //걸러낼때 사용. 가독성  향상
    //return Array; 
        let arr= [25,26,27,28,29,30,31,32,33,34,35,36];
        let arr2=[]; 

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

        console.log( arr2);

        let arr3=[]; 

        arr.forEach(v=>{
            if(v<30){
                arr3.push(v); 
            }
        })

        console.log(arr3); 

        let arr4=[1,2,3,4,5,6,7,8,9,10];
        let arr5=[]; 

        arr5=arr4.filter(v=>{
            return v<=5; 
        })

        console.log(arr5); 

 

 

Array.prototype.reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환

<script type="text/javascript">
    //reduce()는 값을 받는다. 
    //reduce(a,b,c);  a: 임의 값. b: 밸류 값.  c: 인덱스 값.  
    //reduce( function(), []) 가 기본구조.  []는 최초 임의 값. 
    
    let arr1=[1,2,3,4,5,6,7,8,9,10];
    let arr2=[]; 

    arr2=arr1.reduce((p,v)=>{
        return p+v;   //p=p+v; 결과 값이 p에 들어가고, 한번 더 돌면 p는 이전값이 됨. 
    })
    
    ///// 
    let arr = [ 'fox','eagle','alligator'];
    let result=[];  
    // result = arr.map((v,i)=>{
    //     return `${v+(i+1)}`; 
    // });
    result=arr.reduce((p,v,i)=>{
        p.push(v+(i+1));
        return p;
    },[])

    console.log(result);



    </script>