[JS] Javascript의 배열(array)

 

배열

: 배열은 자바스크립트에서 모든 타입의 변수를 보관하는 자료구조로 자바의 List와 유사하다.

 

 

배열 객체의 메서드

(1)  indexOf() : 배열에서 요소가 위치한 인덱스를 반환하는 메소드

     

    : #search의 value값과 동일한 요소가 배열에 있는지 파악한 뒤 그 인덱스 값을 반환, 이 후

      반환된 인덱스 값이 0이상일 경우 결과값에 해당하는 문자열을 출력한다.

<div id = "indexof-note" class="note"></div> <input type = "text" id= "search"> <button onclick = "testIndexOf()">확인하기</button>
<script type="text/javascript">
     function testIndexOf(){
      let indexOfNote = document.querySelector('#indexof-note');
      let keyword = document.querySelector('#search');
      let fruitsArr = ['사과','복숭아','바나나','오렌지','포도'];
      let idx = fruitsArr.indexOf(keyword.value);
                
      if(idx>=0){
        indexOfNote.innerHTML += '당신이 원하는 과일이 있는 인덱스 : ' + idx; 
      }else{
        alert('검색하신 과일이 존재하지 않습니다.');
        //입력창을 비워주세요.
        keyword.value = '';
        //keyword애 focus맞추기
        keyword.focus();
      }
                
  }

 

 

 

(2) concat() : 배열을 결합하여 반환하는 메소드

 

: fruitArr 배열과 fruitArr2 배열을 결합해서 출력한 코드

<div id = "concat-note" class="note"></div>
 <button onclick = "testConcat()">확인하기</button>
  <script type="text/javascript">
    function testConcat(){
        let concatNote = document.querySelector('#concat-note');
        let fruitArr = ['사과','딸기','바나나'];
        let fruitArr2 = ['귤','포도','수박'];
        let concatArr = fruitArr.concat(fruitArr2);
            
                
        <!-- 객체를 문자로 취급하게 되는 상황에서는 자동적으로 toString을 부르게 된다.-->
        concatNote.innerHTML += 'fruitArr : ' + fruitArr + '<br>';
        concatNote.innerHTML += 'fruitArr2 : ' + fruitArr2 + '<br>';
        concatNote.innerHTML += 'concatArr : ' + concatArr + '<br>';    
                
            }

 

 

 

(3) join() :  배열의 요소들을 문자열로 반환하는 메소드

 

: 해당 배열의 요소들을 그냥 반환하거나 원하는 구분자로 구분지어 반환하는 코드

<div id = "join-note" class="note"></div>
 <button onclick = "testJoin()">확인하기</button>
  <script type="text/javascript">
    function testJoin(){
        let joinNote = document.querySelector('#join-note');
        let movieArr = ['해리포터', '헝거게임','호빗','나니아연대기'];
                
        let movieTitle = movieArr.join();
        joinNote.innerHTML += 'movieArr.join() : ' + movieTitle + '<br>';
        movieTitle = movieArr.join('/'); //구분자 사용하기
        joinNote.innerHTML += 'movieArr.join() : ' + movieTitle + '<br>';
                
    }

 

 

(4) reverse() : 배열의 순서를 뒤집는 메소드

: 배열의 순서를 reverse를 사용해 뒤집게 되면 이는 원본 배열에 영향을 주기 때문에 원본배열이 뒤집힌 형태로 유지된다.

<div id = "reverse-note" class="note"></div>
 <button onclick = "testReverse()">확인하기</button>
  <script type="text/javascript">
    function testReverse(){
        let reverseNote = document.querySelector('#reverse-note');
                
        let colorArr = [ '빨','주','노','초','파','남','보'];
        reverseNote.innerHTML += 'colorArr : ' + colorArr + '<br>';
        reverseNote.innerHTML += 'colorArr : ' + colorArr.reverse() + '<br>';
        reverseNote.innerHTML += 'colorArr 다시출력 : ' + colorArr + '<br>';
                
    }

 

 

 

 

(5) sort() : 배열의 요소를 순서대로 반환하는 메소드

 

: sort는 함수식과 함께 사용할 수 있다.

 - 오름차순 함수(left, right는 임의로 정한 값)

    function(left, right){

           return left - right;

       }

 - 내림차순 함수

    function(left, right){

           return right - left;

       }

 

<div id = "sort-note" class="note"></div>
 <button onclick = "testSort()">확인하기</button>
  <script type="text/javascript">
    function testSort(){
        let sortNote = document.querySelector('#sort-note');
        let numArr = [10, 543, 34, 450, 123, 885];
                
        sortNote.innerHTML += 'numArr : ' + numArr + '<br>';
        sortNote.innerHTML += 'numArr.sort(): ' + numArr.sort() + '<br>';
                
        // comepare function을 추가해 정렬 : 숫자를 기준으로 정렬
        // 1. 오름차순 정렬
        sortNote.innerHTML += 'numArr.sort(fn): '
                            + numArr.sort(function(left,right){
                                            return left-right})
                                            + '<br>';
        // 2. 내림차순 정렬
        sortNote.innerHTML += 'numArr.sort(fn): '
                            + numArr.sort(function(left,right){
                                            return right-left})
                                            + '<br>';
                
                
            }
        </script>
        

 

 

 

 

(6) push()  

       - push() :  배열의 맨 뒤의 요소에 추가

       - pop() : 배열의 맨 뒤 요소 제거

<div id = "push-note" class="note"></div>
 <button onclick = "testPush()">확인하기</button>
  <script type="text/javascript">
    function testPush(){
        let pushNote = document.querySelector('#push-note');
        let aniArr = ['토끼','호랑이','고양이','강아지','팬더'];
                
        pushNote.innerHTML += 'aniArr : ' + aniArr + '<br>';
        aniArr.push('사자');
        pushNote.innerHTML += 'aniArr + 사자: ' + aniArr + '<br>';
        aniArr.pop();
        pushNote.innerHTML += 'aniArr - 사자: ' + aniArr + '<br>';
    }
        
</script>

aniArr - 사자 : pop() 메소드를 사용해 마지막 요소 제거 !

 

 

 

 

 

(7) shift() 

     - unshift() : 배열의 맨 앞에 해당 요소 추가

     - shift() : 배열의 맨 앞의 요소 제거

<div id = "shift-note" class="note"></div>
 <button onclick = "testShift()">확인하기</button>
  <script type="text/javascript">
    function testShift(){
                
        let shiftNote = document.querySelector('#shift-note');
        let arr = ['야구','축구','볼링','탁구','테니스'];
                
        shiftNote.innerHTML += 'arr : ' + arr +'<br>';
        arr.unshift('농구');
        shiftNote.innerHTML += '농구 + arr : ' + arr +'<br>';
        arr.shift('농구');
        shiftNote.innerHTML += 'arr - 농구 : ' + arr +'<br>';
                
                
    }

 

 

 

 

(8) splice() : 배열의 요소 선택해 잘라내기

 

 : languages.splice(2,3,"python")

    => languages 배열의 2번째 인덱스부터 3개를 자르고 python을 추가하겠다는 뜻

 : 이 메소드는 원본배열에 영향을 미치게 된다.

<div id = "splice-note" class="note"></div>
 <button onclick = "testSplice()">확인하기</button>
  <script type="text/javascript">
    function testSplice(){
        let spliceNote = document.querySelector('#splice-note');
        let languages = ['자바','oracle','HTML','css','javascript', 'JSP', 'Servlet'];
                
        spliceNote.innerHTML += 'languages : ' + languages;
                
       
        spliceNote.innerHTML += '<br>languages.splice(2,3,"python") :' + languages.splice(2,3,"python");
        spliceNote.innerHTML += '<br> 원본배열 :' + languages;
                
            }

 

 

 

(9) slice() : 배열의 요소를 선택해 잘라내는 메소드

 

: languages.slice(2,3) 

  => 2번 인덱스 부터 3번 인덱스 앞까지(=2번 인덱스) 자른다는 뜻

 

 * splice와 다르게 slice는 원본배열을 얕은 복사해서 해당 인덱스를 자른 뒤에 그 복사된 배열을 드러내주기 때문에 원본에 영향을 미치지 않는다.

<div id = "slice-note" class="note"></div>
 <button onclick = "testSlice()">확인하기</button>
  <script type="text/javascript">
    function testSlice(){
        let sliceNote = document.querySelector('#slice-note');
        let languages = ['자바','oracle','HTML','css','javascript'];
            
        sliceNote.innerHTML += 'languages : ' + languages;
        sliceNote.innerHTML += '<br>languages.slice(2,3) :' + languages.slice(2,3);
        sliceNote.innerHTML += '<br> 원본배열 :' + languages;
                
    }