JavaScript 06. 배열

 배열

- 변수 선언시 별도의 자료형 지정이 없기 떄문에 어떤 자료형의 값들이든 하나의 배열공간에 담을 수 있음
- 크기 제약 없음 

* 배열의 0번 인덱스부터 마지막 인덱스까지 순차적으로 접근 => " for in문" 활용

  for(let i in arr){ 순차적으로 접근할 배열 }

<button onclick="arrayTest1()">확인하기</button>
<div id="area1" class="area"></div>
<script>
        function arrayTest1(){
            const arr = ['홍길동',"서울",20,true,[1,2,3]];
            const area1 = document.getElementById("area1");
            for(let i in arr){ //i=0 -> i=1> i=2> ... >i=마지막 인덱스수 
                area1.innerHTML += arr[i] + "<br>"
            }
</script>

 

 

 

---

* 배열 관련 메소드 

1. 배열.indexOf(찾고자하는 요소): 배열에서 해당요소가 위치해 있는 인덱스 반환 

<div id="area2" class="area"></div>
    <button onclick="indexOfTest();">확인하기</button>
    
    <script>
        function indexOfTest(){
            const divEl= document.getElementById("area2");
            const arr = ["사과","딸기","바나나","복숭아","파인애플"];
            const fruit = prompt("찾고자하는 과일명 입력");
            
            const index = arr.indexOf(fruit); // 해당 요소를 찾지 못하면 -1반환 
           // console.log(index);
           //당신이 찾는 과일 XXX은 판매하지 않습니다. 
           //당신이 찾는 과일 XXX은 x번째 인덱스에 있습니다.
           divEl.innerHTML = "당신이 찾는 과일 " + fruit + "은(는)";
           if(index == -1){
                divEl.innerHTML += "판매하지 않습니다."
           }else{
                divEl.innerHTML += index + " 번째 인덱스에 있습니다."
           }
        }
    </script>

 

>> 자바스크립트에서 두값이 동일한지 비교하는 연산자

   동등연산자 ( == ) : 자료형과 무관하게 실제 값만 일치해도 true

   일치연산자 ( === ) : 값, 자료형 둘다 일치해야 true

---

2.  배열.concat(배열, 배열, ..) : 배열에 여러개의 배열을 결합하고자할 때 사용 => 원본배열에 영향을 끼치지않음 

<div id="area3" class="area"></div>
    <button onclick="concatTest();">확인하기</button>
    
    <script>
        function concatTest(){  
            const divEl = document.querySelector("#area3");

            const arr1 = ["사과","딸기"];
            const arr2 = ["자동차","비행기","오토바이"];
            
            divEl.innerHTML += "arr1 기준으로 배열 합침 : " + arr1.concat(arr2) + "<br>";
            divEl.innerHTML += "다시 arr1 : "+ arr1 + "<br>"; //원본그대로 
            // concat => 원본배열에 영향을 끼치지 않는 메소드 
        }
    </script>

---

3. 배열.reverse() : 배열에 담긴 값들을 역순으로 바꿔주는 메소드 => 원본배열에 영향을 끼침 

<div id="area4" class="area"></div>
    <button onclick="reverseTest();">확인하기</button>

    <script>
        function reverseTest(){
            const divEl = document.getElementById("area4");

            const arr = [1,2,3,4,5];
            divEl.innerHTML += "arr : " + arr + "<br>";
            divEl.innerHTML += "reverse결과 : " + arr.reverse() + "<br>";
            divEl.innerHTML += "다시 arr : "+ arr; //원본배열에 영향
            // reverse => 원본배열에 영향을 끼치는 메소드 

        }
    </script>

---

4. 배열.sort() :배열안에 담긴 값들을 정렬시켜주는 메소드  => 원본배열에 영향끼침 

- 문자열 오름차순 / 내림차순 (sort 로 오름차순 정렬 후 reverse 메소드 호출)

 <div id="area5" class="area"></div>
    <button onclick="sortTest();">확인하기</button>

    <script>
        function sortTest(){
            const divEl = document.getElementById("area5");

            const arr = ["강보람","김보람","나보람","가보람","바보람"];
            divEl.innerHTML += "arr : " + arr + "<br>";
            divEl.innerHTML +=  "오름차순 : " +arr.sort() + "<br>";
            divEl.innerHTML += "다시 arr : " + arr + "<br>"; // 오름차순한 그대로
            //sort => 원본배열에 영향을 끼치는 메소드 
    
            //내림차순 정렬 => 오름차순 정렬 후 역순으로 뒤집기 
            divEl.innerHTML += "내림차순 : " + arr.sort().reverse() + "<hr>";
            }
     </script>

 

 

- 숫자 오름차순/ 내림차순 :
sort()는 숫자 크기대로 정렬하는 것이 아니라 문자열로 바꿔서 정렬하기 때문에 제대로 정렬되지 않음 
> sort(function) : sort메소드 내의 function에서 양수값 리턴시 두개의 순서가 바뀜

<div id="area21" class="area"></div>
<button onclick="sortTest2();">확인하기</button>

<script>
        function sortTest2(){
        const divEl2 = document.getElementById("area21");
		const arr2 = [1,30,21,101,18,201,70,7];
        divEl2.innerHTML += "오름차순 : " + arr2.sort(function(left,right){return left-right}) + "<br>";
        divEl2.innerHTML += "내림차순 : " + arr2.sort(function(left,right){return right-left}) + "<br>";                                        

       }
 </script>

> 오름차순 : 뒤에값보다 앞에값이 큰 경우 순서 바꾸기 / 내림차순 : 앞에 값보다 뒤에 값이 클 경우 순서 바꾸기 

 

 

---

5_1) 배열.push(추가할 요소) : 배열의 맨뒤에 요소 추가시키고 배열의 크기 반환} => 원본배열에 영향 끼침 
5_2) 배열.pop() : 배열의 맨 뒤 요 소 제거 시키고 제거된 요소 반환=> 원본배열에 영향 끼침 

<div id="area6" class="area"></div>
    <button onclick="pushPopTest();">확인하기</button>
    
    <script>
        function pushPopTest(){
            const divEl = document.querySelector("#area6");
            const arr = ["서초동","방배동","역삼동","삼성동","대치동"];
            
            divEl.innerHTML += "arr : " + arr + "<br>";
            divEl.innerHTML += "arr의 push결과 : " + arr.push("신도림동") + "<br>";
            divEl.innerHTML += "다시 arr : " + arr + "<br>";
            //push => 원본배열에 영향을 끼치는 메소드 
            arr.push("잠실본동");
            divEl.innerHTML += "arr : " + arr + "<br>";

            divEl.innerHTML += "arr의 pop결과 : "+ arr.pop() + "<br>";
            divEl.innerHTML += "다시 arr :" + arr  +"<br>"
            arr.pop();
            arr.pop();
            arr.pop();

            divEl.innerHTML += "최종 arr : " + arr; 
        }
    </script>

---

6_1) 배열.unshift(추가할 요소) : 배열의 맨앞에 요소 추가 후 배열의 크기 반환 => 원본배열에 영향 끼침 
6_2) 배열.shift() : 배열의 맨앞에 요소 제거시키고 제거된 요소 반환  => 원본배열에 영향 끼침 

<div id="area7" class="area"></div>
    <button onclick="shiftUnshiftTest();">확인하기</button>
    <script>
        function shiftUnshiftTest(){
            const divEl = document.getElementById("area7");

            const arr = ["당구","야구","볼링","테니스"];
            divEl.innerHTML += "arr : "+ arr + "<br>";
            
            arr.unshift("농구");
            divEl.innerHTML += "unshift 후  : " + arr + "<br>";

            arr.shift();
            divEl.innerHTML += "shift후 : "+ arr;
     
        }
     </script>

---

7_1)  배열.slice(시작인덱스, 끝인덱스) : 배열로부터 시작인덱스에서부터 끝인덱스까지 추출해주는 메소드 => 원본배에 영향 없음 
7_2)  배열.splice(시작인덱스, 제거수, 추가할값) :배열의 요소 추출해서 제거 및 추가 후 제거된 요소 반환 => 원본배열에 영향 끼침 

 <div id="area8" class="area"></div>
     <button onclick="sliceSpliceTest();">확인하기</button>
     <script>
        function sliceSpliceTest(){
            const divEl = document.getElementById("area8");
            const arr = ["Java","Oracle","HTML","CSS","JavaScript"];

            divEl.innerHTML += "arr : " + arr + "<br>";
            //slice(시작,끝) => 원본배열에 영향을 끼치지 않음 
            divEl.innerHTML += "slice결과 : " + arr.slice(2,4) + "<br>";
            divEl.innerHTML += "다시 arr : " + arr + "<br>";

            //splice(시작, 제거수, 추가할 값) => 원본배열에 영향을 끼치는 메소드    
            divEl.innerHTML += "splice 결과 : " + arr.splice(2,2,"Spring","MyBatis")+ "<br>"; 
            divEl.innerHTML += "최종 arr : " + arr;

        }

     </script>

---

8. 배열.toString() / 배열.join([구분자]) : 배열의 각 인덱스에 담긴 값들을 하나의 "문자열"로 합쳐서 반환
  객체를 화면에 출력하면 내부적으로 객체.toString() 호출한 결과가 출력됨

<div id="area9" class="area"></div>
     <button onclick="toStringJoinTest();">확인하기</button>

     <script>
        function toStringJoinTest(){
            const divEl = document.getElementById("area9");
            const arr = ["사과","딸기","배"];
            divEl.innerHTML += "arr : " + arr/*.toString()*/ + "<br>";
            divEl.innerHTML += "toString : " + arr.toString() + "<br>";
            // 객체를 화면에 출력하면 내부적으로 객체.toString() 호출한 결과가 출력
            
            divEl.innerHTML += "divEl : " + divEl + "<br>" ; //요소객체는 콘솔에 출력해야 정확한 결과. 화면상에 출력하면 타입이 출력됨
            divEl.innerHTML += "join : " + arr.join() + "<br>"
            divEl.innerHTML += "구분자 제시한 join : " + arr.join("/") ;

        }
     </script>