배열
: JavaScript에서의 배열은 Java의 Collection과 유사하다.
변수를 선언할 때, 별도의 자료형을 지정하지 않기 때문에 모든 값들을 하나의 배열에 담을 수 있다.
var arr = [1, 2.5, "키위", false, [5, 6, 7]];
- 배열의 0번 인덱스부터 마지막 인덱스까지 접근할 때 사용하는 반복문: for in문
for(var i in arr){
span.innerHTML = arr[i] + "<br>";
}
배열의 선언
: 배열을 선언할 때, 배열의 크기를 지정한 채로 선언하거나 크기를 지정하지 않고 선언해도 된다.
var arr1 = new Array(); // 배열의 크기 0
var arr2 = new Array(5); // 배열의 크기 5
var arr3 = []; // 배열의 크기 0
- 배열에 값을 대입할 때,
arr1[0] = "대한";
arr1[2] = "민국";
arr1[5] = "만세";위는 ['대한', 비어있음, '민국', 비어있음×2, '만세'] 으로 배열이 구성된다. 배열의 크기는 6이 된다.
arr2[5] = 10;
arr2[6] = 11;위 arr2의 배열의 크기는 5에서 7로 증가되었다. [비어있음×5, 10, 11]로 배열이 구성되었다.
- 배열의 선언과 동시에 초기화
// 방법1.
var arr4 = new Array("선언", "초기화");
// 방법2.
var arr5 = ["오", 2, 7.63];
배열 객체 메소드
◈ .indexOf(요소)
: 배열에서 해당 요소가 위치하고 있는 인덱스값을 반환한다.
var arr6 = ["가", "나", "다", "라"];
var hangeul = prompt("가~라 중 하나 입력하세요.");
var index = arr6.indexOf(hangeul);
◈ .concat(배열1, 배열2, ...)
: 여러 개의 배열을 결합하여 반환한다.
- 배열들을 합쳐도 원본 배열에는 영향을 미치지 않는다.
arr5.concat(arr4, [700, "산"]);
// [5, 2, 7.63, '선언', '초기화', 700, '산']
◈ .reverse()
: 배열에 담긴 값들을 역순으로 바꾼다.
- 배열들을 역순으로 바꿨을 때 원본 배열에 영향을 미친다.
var fruit = ["감", "딸기", "귤", "포도"];
divE.innerHTML = fruit.reverse() + "<br>";
// 포도,귤,딸기,감
divE.innerHTML += fruit + "<br>";
// 포도,귤,딸기,감
◈ .sort()
: 배열에 담긴 값들을 오름차순으로 정렬시킨다.
- 배열들을 오름차순으로 정렬했을 때 원본 배열에 영향을 미친다.
var fruit2 = ["바나나", "낑깡", "오렌지", "수박"];
divE.innerHTML += fruit2.sort() + "<br>";
// 낑깡,바나나,수박,오렌지
divE.innerHTML += fruit2 + "<br>";
// 낑깡,바나나,수박,오렌지
◈ push(추가요소), pop()
- push(): 배열의 맨 뒤에 요소를 추가한 후 배열의 크기를 반환한다.
- pop(): 배열의 맨 뒤의 요소를 제거한 후 제거된 요소를 반환한다.
var color = ["빨", "주", "노", "초"];
color.push("파");
// 빨,주,노,초,파
divE.innerHTML += color.push("남") + "<br>";
// 6 : 배열의 크기
divE.innerHTML += color.pop();
// 남
◈ unshift(추가요소), shift()
- unshift(): 배열의 맨 앞에 요소를 추가한 후 배열의 크기를 반환한다.
- shift(): 배열의 맨 앞의 요소를 제거한 후 제거된 요소를 반환한다.
var drink = ["물", "주스", "커피", "탄산수"];
drink.unshift("차");
// 차,물,주스,커피,탄산수
divE.innerHTML += drink.unshift("콜라") + "<br>";
// 6 : 배열의 크기
divE.innerHTML += drink.shift() + "<br>";
// 콜라
◈ slice(시작 인덱스, 마지막 인덱스), splice(시작 인덱스, 제거 수, 추가 요소)
- slice(): 배열의 시작 인덱스값부터 마지막 인덱스 전까지의 값을 추출한다.
배열에서 값을 추출했을 때 원본 배열에 영향을 미치지 않는다.
- splice(): 배열의 시작 인덱스값부터 제거 수만큼 값을 추출해서 제거한 후 추가 요소를 추가한다.
이때 추가 요소는 생략할 수 있다.
배열에서 값을 추출 및 제거, 추가했을 때 원본 배열에 영향을 미친다.
var country = ["한국", "일본", "중국", "북한", "러시아"];
divE.innerHTML += country.slice(1, 3) + "<br>";
// 일본,중국
divE.innerHTML += country + "<br>";
// 한국,일본,중국,북한,러시아
divE.innerHTML += country.splice(1, 3, "인도네시아") + "<br>";
// 일본,중국,북한
divE.innerHTML += country + "<br>";
// 한국,인도네시아,러시아
◈ toString(), join([구분자])
: 배열에 담긴 값들을 하나의 문자열로 합쳐서 반환한다.
- join(): 기본 구분자 ','가 입력한 구분자로 적용되어 반환된다.
var dance = ["비보잉", "발레", "락킹"];
divE.innerHTML += dance.toString() + "<br>";
// 비보잉,발레,락킹
divE.innerHTML += dance.join(" ") + "<br>";
// 비보잉 발레 락킹