[javascript] 객체02 (배열 객체)

 

 

 

변수에는 하나의 데이터만 저장가능.

여러개의 데이터를 하나의 장소에 저장하려면> --> 배열 객체(Array Object)를 생성하면 됨.

 

배열객체를 생성하는 방법은 세가지이며, 이 중 선호하는 방식을 사용하면 된다.

• 방식01 

var 참조변수 = new Array();
참조변수[0]=값1;
참조변수[1]=값2;
참조변수[2]=값3;
...
참조변수[n-1]=값n;

//적용 예시
var d = new Array();
d[0]=30;
d[1]=따르릉;
d[2]=true;

 

• 방식02

var 참조변수 = new Array(값1, 값2, 값3, ...값n);

//적용예시
var d = new Array(30, "따르릉", true);

 

• 방식03

var 참조변수 = [값1, 값2, 값3, ...값n];

//적용예시
var d = [30, "따르릉", true];

이때, 배열을 선언하면 각각의 저장소에 인덱스 번호가 부여된다. (인덱스 번호는 0부터 시작)

[30, "따르릉", true]에서 30은 index 0, "따르릉"은 index 1, true는 index 2가 된다.

 

 

 

배열 객체에 저장된 데이터 불러오기

참조 변수[인덱스 번호];

 

예제1)

        var arr = [30, "따르릉", true];

        document.write("<h3>배열값 가져오기01</h3>");
        document.write(arr[0], "<br>");
        document.write(arr[1], "<br>");
        document.write(arr[2], "<br>");

        
        
        document.write("<h3>배열값 가져오기02</h3>");
        for(var i = 0; i < arr.length; i++){
            document.write(arr[i], "<br>");
        }
        //배열에 3개의 데이터가 저장되어 있다. 
        

        document.write("<h3>배열값 가져오기03</h3>");
        for (i in arr){
            document.write(arr[i], "<br>");
        }
        //i는 0부터 2까지 반복되며, arr 인덱스 값 0,1,2를 화면에 출력한다.

에제1) 출력 결과값

 

 

배열 객체의 메서드 및 속성

종류	설명
join(연결 문자)	배열 객체의 데이터를 연결문자 기준으로 1개의 문자형 데이터로 반환
reverse()	배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환
sort()	배열 객체의 데이터를 오름차순으로 정렬
slice(index1, index2)	배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴
splice()	배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있음
concat()	2개의 배열 객체를 하나로 결합
pop()	배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제
push(new data)	배열 객체의 마지막 인덱스에 새 데이터를 삽입
shift()	배열 객체에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터를 삭제
unshift(new data)	배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입
length	배열에 저장된 총 데이터의 개수를 반환

 

 

 

예제2) 배열 객체 메서드인 join(), concat(), slice(), sort(), reverse()를 사용

        var arr01 = ["사당", "교대", "방배", "강남"];
        var arr02 = ["신사", "압구정", "옥수"];

        //배열에 저장된 값을 지정한 문자로 연결하여 하나의 문자열을 반환
        var result = arr01.join("-");
        console.log(result);
        
        //2개의 배열을 하나의 배열로 만들어 반환
        result = arr01.concat(arr02);
        console.log(result);
        
        //배열의 1번 이전의 인덱스 요소를 잘라냄. 그리고 남은 값을 반환
        result = arr01.slice(1, 3);
        console.log(result);
        
        //배열의 값을 오름차순으로 정렬
        arr01.sort();
        console.log(arr01);
        
        //배열의 순서를 거꾸로 뒤집음
        arr02.reverse();
        console.log(arr02);

예제2) console 출력값

 

 

 

 

예제3) 배열객체 메서드인 splice(), pop(), push(), shift(), unshift()를 사용

        var greenArr = ["교대", "방배", "강남"];
        var yellowArr = ["미금", "정자", "수서"];
        
        //2번 인덱스부터 1개의 데이터를 삭제하고, "서초", "역삼"을 삽입
        greenArr.splice(2, 1, "서초", "역삼");
        console.log(greenArr);
        
        //yellowArr배열 마지막 인덱스의 데이터를 data1에 저장
        var data1 = yellowArr.pop();
        
        //yellowArr배열 가장 앞쪽 인덱스의 데이터를 data2에 저장
        var data2 = yellowArr.shift();
        
        //data2에 저장된 데이터를 yellowArr 배열의 마지막 인덱스에 밀어넣음
        yellowArr.push(data2);
        console.log(yellowArr);
        
        //data1에 저장된 데이터를 yellowArr 배열의 가장 앞쪽 인덱스에 밀어넣음
        yellowArr.unshift(data1);
        console.log(yellowArr);

예제3) console 출력 값