[ 자바스크립트 ] 배열에서 indexOf() 사용하기

최종 수정일 : 2016. 11. 3.

배열에서의 indexOf() :

익스플로러(ie) 9 이상 & 그외 브라우저에서는 기본적으로 제공되는 함수이다.

찾고자 하는 것( item )의 위치( index )를 알려준다.
찾으려는 것이 배열에 들어있지 않으면, "-1"이라는 결과가 나온다.

찾는 것이 여러 개 들어있다면,
그 중에서 맨 앞에 있는 것을 알려준다.

─ indexOf() : 배열의 앞에서부터 뒤쪽으로, 검색해나간다.
─ lastIndexOf() : 배열의 뒤에서부터 앞쪽으로, 검색해나간다.

---

Polyfill

<script type="text/javascript">
// source : https://tonks.tistory.com/120#_javascript_array_indexOf 

if ( ! Array.prototype.indexOf ){ 
     Array.prototype.indexOf = function indexOf ( toBeSearched , fromIndex ){ 
          if ( this == null ){ 
               try {  throw new Error( "Array.prototype.indexOf called on null or undefined." );   } 
               catch( error ) { 
                         error.name = "TypeError"; 
                         throw error; 
               } 
          } 

          var thisObj = Object( this ); 

          var length = thisObj.length >>> 0; 
          if ( length === 0 ){  return -1;  } 

          var index = Math.floor( fromIndex ) || 0; 
          var abs = Math.abs( index ); 

          if ( abs === Infinity ){  index = 0;  } 
          else if ( index < 0 ){  index = ( abs > length ) ? 0 : length - abs;  } 

          for ( index; index < length; index++ ){ 
               if ( index in thisObj && thisObj[ index ] === toBeSearched ){  return index;  } 
          } 

          return -1; 
     }; 
} 
</script>

---

 
<button onclick="testing()"> 클릭하세요 </button>

<p id="demo_0">  </p>
<p id="demo_1">  </p>
<p id="demo_3">  </p>

<p id="demo">  </p>


<script type="text/javascript">

function testing (){ 

    var array = [ "Tistory", "Daum", "Naver", "Google", "StackOverflow" ]; 

    var from_0 = array.indexOf ( "Naver" );        // 배열의 맨 처음부터 뒤쪽으로 검색 진행함. ( 0번째부터 ) 
    var from_1 = array.indexOf ( "Naver" , 1 );   // 1번째부터 뒤쪽으로 검색 진행함. 
    var from_3 = array.indexOf ( "Naver" , 3 );   // 3번째부터 뒤쪽으로 검색 진행함. 

    document.getElementById( "demo_0" ).innerHTML = from_0; 
    document.getElementById( "demo_1" ).innerHTML = from_1; 
    document.getElementById( "demo_3" ).innerHTML = from_3; 


    var similar = array.indexOf ( "Nav" );   // 정확히 일치하는 것만 찾아냄. 
    document.getElementById( "demo" ).innerHTML = similar; 
} 
</script>
 

---

 
<button onclick="testing()"> 클릭하세요 </button>

<p id="demo_0">  </p>
<p id="demo_2">  </p>
<p id="demo_4">  </p>


<script type="text/javascript">

function testing (){ 

    var array = [ "Tistory", "Daum", "Naver", "Google" , "Tistory", "Daum", "Naver", "Google" ]; 

    var from_0 = array.indexOf ( "Naver" ); 
    var from_2 = array.indexOf ( "Naver" , 2 ); 
    var from_4 = array.indexOf ( "Naver" , 4 ); 

    document.getElementById( "demo_0" ).innerHTML = from_0; 
    document.getElementById( "demo_2" ).innerHTML = from_2; 
    document.getElementById( "demo_4" ).innerHTML = from_4; 
} 
</script>
 

---

 
<button onclick="testing()"> 클릭하세요 </button>

<p id="num">  </p>
<p id="str">  </p>


<script type="text/javascript">

function testing (){ 

    var array = [ 2, 4, 6, 8, 10 ]; // 숫자만 들어있는 배열 

    var number = 8; // 숫자 8 
    var string = "8"; // 문자 (문자열) "8" 

    document.getElementById( "num" ).innerHTML = array.indexOf ( number ); 
    document.getElementById( "str" ).innerHTML = array.indexOf ( string ); 
} 
</script>
 

---

위치(index)의 값으로 음수를 넣게 되면, 결과는 아래와 같다.

 
<button onclick="testing()"> 클릭하세요 </button>

<p id="neg1">  </p>
<p id="neg2">  </p>


<script type="text/javascript">

function testing (){ 

    var array = [ 2, 4, 6, 8, 10 ]; 

    var negative_1 = array.indexOf ( 8 , -1 );  
    var negative_2 = array.indexOf ( 8 , -2 );  

    document.getElementById( "neg1" ).innerHTML = negative_1; 
    document.getElementById( "neg2" ).innerHTML = negative_2; 
} 
</script>
 

이 블로그에서 함께 볼만한 글 : [ 자바스크립트 ] 배열에서 lastIndexOf() 사용하기

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*