12. JavaScript 배열(Array)

○ Array (배열)

    - 연속성 자료형, 열거형, 컬렉션
    - 하나의 변수에 1개 이상의 값을 저장할 수 있는 공간
    - element, 요소, 원소 
    - index, 순서, 색인 (0부터 시작해서 1씩 증가한다)

 

○ 배열 객체 생성 (선언)

    - 형식

        ① var 배열이름 = [];  → 추천

        ② var points = new Array();  → 비추천 (old version)

        ③ var 배열이름 = [요소1, 요소2, ...];  → 배열선언 및 초기화

var kor=[];  //배열 선언
kor[0]=10;   //배열요소의 인덱스는 0부터 시작한다
kor[1]=20;   //배열요소의 인덱스는 1씩 증가한다
kor[2]=30;

document.write(kor[0]);
document.write(kor[1]);
document.write(kor[2]);


var points = [40, 100, 25, 3, 7];    //배열 선언 및 초기화 : 배열 선언하며 요소를 바로 넣어줌

document.write(points);			 //40,100,25,3,7 : 배열요소 전체
document.write(points.length);		 //5 : 배열 요소의 개수

for(i=0; i<points.length; i=i+1){
    document.write(points[i]);		 //반복문을 이용해서 요소 일괄처리 가능
}//for end


var fruits=["banana", "apple", "mango", "orange"];
fruits[6]="lemon";		//[4],[5] 건너뛰고 추가 가능 (자바스크립트에서만 가능)
			
document.write(fruits.length);  //7
document.write(fruits[6]);  	//lemon
document.write(fruits[8]);  	//undefined
document.write(fruits[4]);  	//undefined
document.write(fruits[5]);  	//undefined [4],[5]는 값은 없지만 요소로 존재

 

○ 배열 객체 관련 메소드

    - 사용 형식 : 배열이름.메소드();

        ① join(연결문자) : 배열을 ,가 아닌 다른 문자로 연결

        ② pop() : 배열 마지막 요소 제거(빼내기)

        ③ push(값) : 배열 마지막 요소 추가

        ④ shift() : 배열 맨처음 요소 제거 

        ⑤ unshift(값) : 배열 맨처음 요소 추가

        ⑥ splice(시작인덱스, 끝인덱스) : 시작인덱스부터 끝인덱스-1까지 요소 제거

        ⑦ slice(시작인덱스, 끝인덱스) : 시작인덱스부터 끝인덱스-1까지 요소 가져오기 (복사)

var fruits=["banana", "orange", "apple", "mango"];

//연결문자 변경
document.write(fruits.join("*"));    //"banana*orange*apple*mango"
document.write(fruits.join("♡"));   //"banana♡orange♡apple♡mango"

//배열 마지막 요소 제거
fruits.pop();                        
document.write(fruits);              //"banana,orange,apple"

//배열 마지막 요소 추가
fruits.push("kiwi");                 
document.write(fruits);              //"banana,orange,apple,kiwi"

//배열 첫 요소 제거
fruits.shift();                      
document.write(fruits);              //"Orange,apple,kiwi"

//배열 첫 요소 추가
fruits.unshift("lemon");             
document.write(fruits);              //"lemon,orange,apple,kiwi"

//해당 인덱스 요소 제거
fruits.splice(0, 2);                 //0번째부터 1(=2-1)번째까지 제거
document.write(fruits);              //"apple,kiwi"

//해당 인덱스 요소 가져오기
document.write(fruits.slice(0, 2));  //"apple,kiwi" : 0번째부터 1(=2-1)번째까지 가져옴
document.write(fruits);              //"apple,kiwi"

 

    - 여러 배열 객체 합치기 : 배열명.concat(배열1, 배열2);

var arr1=["손흥민", "황희찬"];
var arr2=["곽윤기", "최민정"];
var arr3=["차준환", "김연아"];

var arr4=arr1.concat(arr2, arr3);

document.write(arr4);		//손흥민,황희찬,곽윤기,최민정,차준환,김연아
document.write(arr4.length);	//6

 

○ 배열 정렬 (Sort)

    - 정렬 : 어떤 Key값을 기준으로 순서대로 정렬

        ① 유형 : Ascending(ASC, 오름차순) / Descending(DESC, 내림차순)

        ② 방식 : insertion sort(삽입 정렬), selection sort(선택 정렬), bubble sort, shell sort

    - 배열 정렬 형식

        ① 문자형 : 배열명.sort() → 오름차순 / 배열명.reverse() → 내림차순

        ② 숫자형 : 배열명.sort(function(a, b){return a - b}) → 오름차순

                       배열명.sort(function(a, b){return b - a}) → 내림차순

//문자형 배열 정렬

var fruits=["banana", "orange", "apple", "mango"];

fruits.sort();              //오름차순 정렬(dictionary sort)
document.write(fruits);     //"apple,banana,mango,orange"

fruits.reverse();           //순서 반대로, 오름차순 한 후 내림차순 정렬
document.write(fruits);     //"orange,mango,banana,apple"


//숫자형 배열 정렬

const points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});   //오름차순
document.write(points);                      //1,5,10,25,40,100

points.sort(function(a, b){return b - a});   //내림차순
document.write(points);                      //100,40,25,10,5,1