[JavaScript]배열

 자바스크립트에서 배열은 자바의 컬렉션과 비슷한 성질을 가지고 있음

 크기를 설정하지 않아도 됨. 유용한 함수들을 가지고 있음

 컬렉션에는 없는, 직접 index를 활용해서 값을 대입할 수 있음

* 활용법 기본배열과 동일(java기준)

[배열선언 및 초기화]

 //기본배열 선언 및 초기화 하기 2가지 방법

    var arr=[]; 

    var arr2=new Array();

    console.log(typeof(arr), typeof(arr2));

    //배열 길이를 확인 -> length

    console.log("배열의 길이 "+arr.length); // 길이선언안해서 0나옴 

    //배열에 값 대입하기

    //1. 인덱스+대입연산자를 이용하는 방법

    //2. Array객체 함수를 이용하는 방법

    arr[0]="홍길동";

    console.log(arr[0], arr.length);

    console.log(arr[1]); //값을 안넣었기 때문에 undefined

    arr[10]=19;

    console.log(arr[10]); //중간은 비어있고 index10번에만 값넣을수있음

    for(var i=0; i<arr.length; i++){

        console.log(arr[i]); //1~9까지는 빈값으로 자동 생성되있음

    }

[함수 이용하기]

[ 배열에 값넣기 push / unshift ]

    //push - 배열의 맨마지막 인덱스 값을 넣기

    arr.push("마지막"); 

    console.log(arr[11]);

    //unshift - 배열의 맨앞에 인덱스 값 넣기

    arr.unshift("맨앞");

    console.log(arr[0]);

    //선언과 동시에 초기화

    arr=["1","2","3","4"];

    console.log(arr[0],arr[1],arr[2],arr[3]);

    //함수를 배열 인덱스에 넣으면 인덱스번호 자체가 함수명이 됨

    arr.push(function(){alert("이건함수")});

    console.log(arr[4]);

    arr[4](); 

[배열값 삭제 pop / shift]

//값을 삭제하는 함수 2가지

    //pop() / shift()

    arr.pop(); //맨뒤에서 부터 순차적으로 지움

    arr.pop();

    arr.pop();

    //console.log(arr[4]);

    console.log(arr.length); //5중에 3개지워서 2가 출력됨

    console.log(arr[0]);

    arr.shift();

    console.log(arr[0]);

    </script>

[배열의 인덱스번호 리턴 - indexOf]

 <h1>배열을 활용하는 함수알아보기</h1>

    <h4>indexOf : 배열의 요소가 위치하고 있는 index번호를 리턴</h4>

    <div id="area"></div>

    <button onclick="indexOfTest();">실행</button>

    <script>

        var area = document.getElementById("area");

        var arr1 = ["삼겹살","초밥","회","마라탕"];

        area.innerHTML+="arr1"+arr1+"<br/>";

        

        function indexOfTest(){

            area.innerHTML+="arr1 초밥의 인덱스 : "+arr1.indexOf("초밥")+"<br/>";

        }

        //초밥을 찾고 그 값을 된장국으로 변경하고 출력

        arr1[arr1.indexOf("초밥")]="된장국";

        area.innerHTML+="변경 후 : "+arr1+"<br>";

    </script>

[배열합치기 concat]

<h4>concat : 두개 이상의 배열을 합쳐주는 기능</h4>

    <div id="area1"></div>

    <button onclick="concatTest();">실행</button>

    <script>

        var area1 = document.getElementById("area1");

        var ani = ["강아지","고양이", "닭", "돼지"];

        var ani1 = ["붕어","매기","미꾸라지","송어"];

        var ani2 = ["갈매기","독수리","부엉이","참새"];

        var cross = ani.concat(ani1,ani2); //배열을 합치능 기능 , 새로운 배열로 반환

        area1.innerHTML="<h1>"+cross+"</h1>"; //새로운배열로 3개가 합쳐져있음

        area1.innerHTML+="<h1>"+ani+"</h1>";

        area1.innerHTML+="<h1>"+ani1+"</h1>";

    </script>

[배열을 문자열로 합치기 join]

<h4>join : 배열을 문자열로 합치는 것</h4>

    <div id="area2"></div>

    <button onclick="joinTest();">실행</button>

    <script>

        function joinTest(){

            var area2 = document.getElementById("area2");

            var arr3 = ["1,2,3,4,5"];

            var joinStr = arr3.join("-"); // -을 기준으로 문자열이 합쳐짐

            area2.innerHTML="기본배열"+arr3+"</br>";

            area2.innerHTML+="문자열변환"+joinStr+"</br>";

        }

    </script>

[배열 정렬하는 함수 sort]

 <script>

        //기본적으로 오름차순정렬됨

        var arrInt = [1,5,3,4,2,9,6];

        console.log(arrInt);

        console.log(arrInt.sort());

        //내림차순

        console.log(arrInt.sort(mySort));//로직을 구성한 함수를 매개변수로 넣어주면 로직대로 순서정렬을 해줌

        console.log(arrInt.sort(function(left,right){

            return right-left;

        }));

        

        arrInt=["가","다","나","라","하"];

        //ecma6와서 람다와같은 표현식으로 사용할 수 있게 -> 화살표함수

        // console.log(arrInt.sort((left,right)=>right-left));

        console.log(arrInt.sort((left,right)=>{

            if(left>right) return -1;

            else if(left<right) return 1;

            else return 0;

        }));

        function mySort(left,right){

            return right-left;

        }

   

    </script>

[slice / splice]

  slice : 배열의 값을 선택해서 새로운 배열을 출력(string.substring유사)

        slice(number(index1),number(index2))

  splice : 특정위치의 값을 제거하고 추가

        splice(start,deletecount,value추가될값)

<div id="area3"></div>

    <button onclick="sliceTest();">실행</button>

    <button onclick="spliceTest();">splice실행</button>

    <script>

        function sliceTest(){

            var area3 = document.getElementById("area3");

            var fruit=["사과","포도","딸기","수박","바나나"];

            area3.innerHTML=fruit+"<br>";

            var fruit2 = fruit.slice(2,4);//배열이 새로 생성됨 2~3만선택

            area3.innerHTML+=fruit2+typeof(fruit)+"<br>";

        }

        function spliceTest(){

            var area3 = document.getElementById("area3");

            var dog = ["시츄","시바","진돗개","리트리버","허스키"];

            area3.innerHTML+=dog+"<br>";

            dog.splice(0,2,"말티즈","치와와","차우차우"); //0~1에있던 값제거하고 새로운값추가

            area3.innerHTML+=dog+"<br>";

        }

[filter]

배열에서 특정 로직을 수행하고 그 로직에 일치하는 배열의 값만 

합쳐서 새로운 배열로 출력

Array.filter(로직==function())

 var arr4=[10,20,5,8,22,13,18,25];

        //15이상 숫자만 새로운 배열로 출력

        var filterArr = arr4.filter(filterTest);

        console.log("변경전 원본",arr4);

        console.log(filterArr);

        console.log("변경후 원본",arr4);

        

        function filterTest(num){

            return num>15;

        }