Java Script에서 배열은 java의 Array List <Object>와 비슷하다.
js의 배열은 제네릭 부분에 오브젝트로 설정되어있는 것처럼 어떤 값이든 받을 수 있는 배열이다.
선언 방법은 5가지로
var arr1 = new Array();
var arr2 = new Array(5);
var arr3 = [];
var arr4 = [1, 2, 3, 4, 5];
방의 크기를 지정하지 않는 방법
방의 크기만 지정하는 방법
방의 크기를 지정하지 않는 방법2
값을 바로 선언하는 방법
4가지가 된다.
배열에서 사용할 수 있는 메소드들은 아래와 같이 있다.
몰론 더 많이 있지만 자주 쓰이는거 위주로 모아놨다.
indexOf(문자열) : 인자로 받은 값이 배열에 어디 위치 했는지를 반환한다.
concat(배열) : 인자로 받은 배열을 합칠 때 사용한다.
join(구분자) : 배열의 값들을 '구분자'로 구분하여 합쳐서 값을 반환한다. (그냥 배열 자체를 출력 했을 때와 결과가 같지만 자료형은 String) (구분자 기본값은 ',' 이다.)
reverse() : 배열을 뒤집는다.
sort() : 배열을 정렬한다.(단, 숫자의 경우 456 이라면 맨 앞의 숫자 4를 기준으로 정렬, 문자열로 인식해서 정렬한다.)
push(Object) : 배열의 뒤에 값을 추가한다.
pop() : 배열의 맨 뒤의 값을 제거하고 그 값을 리턴
shift() : 배열의 맨 앞의 요소를 제거
unshift(Object) : 배열의 맨 앞에 값을 추가
slice(index1, index2) : index1부터 index2 - 1 범위의 배열 값을 반환한다.
splice(index, 갯수, 추가할 Object) : 배열의 index번째 부터 '갯수' 만큼 삭제하고 맨 뒤에 'Object'를 추가한다.
toString() : 배열의 값들을 ','로 구분하여 문자열로 반환한다, join과 비슷하지만 구분자를 지정 할 수 없다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area{
border: 2px solid red;
background-color: lightgray;
height: 200px;
}
</style>
</head>
<body>
<h1>배열</h1>
<h3>배열이란?</h3>
<p>자바스크립트에서는 자료형 지정이 없기 때문에
모든 자료형을 보관하는 변수의 모음을 배열로 처리한다.<br>
자바에서의 arrayList와 비슷하다.</p>
<div id="area1" class="area"></div>
<button onclick="arrayTest();">확인하기</button>
<script type="text/javascript">
function arrayTest() {
var area1 = document.getElementById("area1");
//배열을 생성하는 4가지 방법
var arr1 = new Array();
var arr2 = new Array(5);
var arr3 = [];
var arr4 = [1, 2, 3, 4, 5];
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(typeof(arr1));
console.log(typeof(arr2));
console.log(typeof(arr3));
console.log(typeof(arr4));
// 자바의 컬렉션처럼 모든 타입의 값을 배열 형태로 담을 수 있다.
var arr5 = ['문자', 2, true, [1, 2, 3, 4]];
console.log(arr5);
area1.innerHTML += arr5 + "<br>";
console.log(arr5);
for(var i = 0; i < arr5.length; i++){
area1.innerHTML += 'arr5[' + i + '] : ' + arr5[i] + "<br>";
if(i == 3){
for(var j = 0; j < arr5[i].length; j++){
area1.innerHTML += 'arr5[' + i + '][' + j + '] : ' + arr5[i][j] + "<br>";
}
}
}
}
</script>
<hr>
<h3>배열의 선언</h3>
<p>배열 선언시 크기를 지정하지 않고 선언할 수도 있고,
크기를 정하고 선언할 수도 있다.</p>
<div id="area2" class="area"></div>
<button onclick="arrayTest2();">확인하기</button>
<script type="text/javascript">
function arrayTest2() {
var area2 = document.getElementById("area2");
var arr1 = new Array();
var arr2 = new Array(3);
console.log(arr1);
console.log(arr2);
// 크기를 지정하지 않은 배열에 값 대입 add와 비슷
arr1[0] = '바나나';
arr1[1] = '복숭아';
arr1[2] = '키위';
arr1[3] = '딸기';
console.log(arr1);
// 하지만 콘솔에서 맨 처음 console.log(arr1);을 펼쳐보면 바나나 등등 데이터가 똑같이 들어가있다.
// 콘솔은 최종의 데이터를 보여주는것을 꼭 생각해두자.
// 크기를 지정한 배열에 값 대입
arr2[0] = '자동차';
arr2[1] = '비행기';
arr2[2] = '도보';
// 없는 인덱스에도 값 대입(동적으로 생성해준다.)
arr2[3] = '기차';
console.log(arr2);
var arr3 = new Array('홍길동', '임꺽정', '신사임당');
console.log(arr3);
var arr4 = ['java', 'oracle', 'html5', 'css3', 'javascript'];
console.log(arr4);
}
</script>
<hr>
<h3>Array 객체의 메소드</h3>
<p>Array도 하나의 객체이기 때문에 배열에서 활용할 수 있는 메소드가 있다.</p>
<h4>indexOf() : 배열에서 요소가 위치하는 인덱스를 리턴</h4>
<div id="area3" class="area"></div>
<button onclick="methodTest1();">확인하기</button>
<script type="text/javascript">
function methodTest1() {
var area3 = document.getElementById("area3");
// area3 같이 id로 지정하면 전역변수로 지정되기 때문에 이와같이 선언하지 않고
// 그냥 써도 되지만 권장하지 않는 방법이다.
var arr = ['사과', '딸기', '바나나', '복숭아', '키위', '파인애플', '토마토'];
var str = prompt("찾는 과일 이름을 입력하세요");
area3.innerHTML += "당신이 찾는 과일 " + str + "은" + arr.indexOf(str)
+ "번째 인덱스에 있습니다.";
}
</script>
<br>
<h4>concat(배열명) : 두 개 혹은 세 개의 배열을 결합할 때 사용한다.</h4>
<div id="area4" class="area"></div>
<button onclick="methodTest2();">확인하기</button>
<script>
function methodTest2() {
var area4 = document.getElementById("area4");
var arr1 = ['사과', '딸기', '바나나'];
var arr2 = ['복숭아', '키위', '파인애플', '토마토'];
var arr3 = arr1.concat(arr2);
var arr4 = arr2.concat(arr1);
area4.innerHTML += "arr1 : " + arr1 + "<br>";
area4.innerHTML += "arr2 : " + arr2 + "<br>";
area4.innerHTML += "arr1 기준으로 배열을 합침 : " + arr1.concat(arr2) + "<br>";
area4.innerHTML += "arr2 기준으로 배열을 합침 : " + arr2.concat(arr1) + "<br>";
// 원본 배열에 영향을 끼치지 않는 메소드이다.
area4.innerHTML += "arr1 다시 출력 : " + arr1 + "<br>";
area4.innerHTML += "arr2 다시 출력 : " + arr2 + "<br>";
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
}
</script>
<h4>join() : 배열을 결합하여 문자열로 반환한다.</h4>
<div id="area5" class="area"></div>
<button onclick="methodTest3();">확인하기</button>
<script type="text/javascript">
function methodTest3() {
var area5 = document.getElementById("area5");
var arr = ['소녀시대', '핑클', 'SES', '미쓰에이'];
//,를 기준으로 문자열 합치기를 한 결과 문자
var arrJoin = arr.join();
area5.innerHTML += "arr : " + arr + "<br>";
area5.innerHTML += "arrJoin : " + arrJoin + "<br>";
area5.innerHTML += "arr의 자료형 : " + typeof(arr) + "<br>";
area5.innerHTML += "arrJoin의 자료형 : " + typeof(arrJoin) + "<br>";
console.log(arr);
console.log(arrJoin);
// String의 Split 키워드로 다시 원상복구가 가능하다.
}
</script>
<br>
<h4>reverse() : 배열의 순서을 뒤집는다.</h4>
<div id="area6" class="area"></div>
<button onclick="methodTest4();">확인하기</button>
<script type="text/javascript">
function methodTest4() {
var area6 = document.getElementById("area6");
var arr = [1,2,3,4,5,6,7,8,9];
//원본 배열에 영향을 끼치는 메소드이다.
area6.innerHTML += "arr : " + arr + "<br>";
area6.innerHTML += "arrReverse : " + arr.reverse() + "<br>";
area6.innerHTML += "arr 다시 출력 : " + arr + "<br>";
}
</script>
<br>
<h4>sort() : 배열을 내림차순 혹은 오름차순으로 정렬한다.</h4>
<div id="area7" class="area"></div>
<button onclick="methodTest5();">확인하기</button>
<script type="text/javascript">
function methodTest5() {
var area7 = document.getElementById("area7");
var arr = [10, 42, 324, 456, 984, 412];
// 오름차순 정렬
// 숫자 크기대로 정렬하는 것이 아님
// 배열에 있는 내용을 문자열로 바꾸어 아스키코드 문자 순서로 정렬되니 주의해야 함
// 또한 원본 배열에 영향을 끼치는 메소드이다.
area7.innerHTML += "arr : " + arr + "<br>";
area7.innerHTML += "arr.sort()의 값 : " + arr.sort() + "<br>";
area7.innerHTML += "arr 다시 출력 : " + arr + "<br>";
// 내림차순 정렬
// 두 번째 인수가 더 큰 경우 양수값을 리턴하여 순서를 바꾼다.
area7.innerHTML += "내림차순 정렬 : " + arr.sort(function(left, right){
return right - left;
}) + "<br>";
area7.innerHTML += "arr 다시 출력: " + arr + "<br>";
}
</script>
<br>
<h4>push() : 배열의 맨 뒤에 요소를 추가<br>
pop : 배열의 맨 뒤에 요소를 제어하고 리턴</h4>
<div id="area8" class="area"></div>
<button onclick="methodTest6();">확인하기</button>
<script type="text/javascript">
function methodTest6() {
var area8 = document.getElementById("area8");
var arr = ['서초동', '방배동', '역삼동', '삼성동', '대치동'];
area8.innerHTML += "arr의 기본값 : " + arr + "<br>";
arr.push('남양주시');
area8.innerHTML += "arr에 push : " + arr + "<br>";
arr.sort();
area8.innerHTML += "arr 정렬 : " + arr + "<br>";
arr.push('잠실본동');
arr.sort();
area8.innerHTML += "arr에 push2 : " + arr + "<br>";
area8.innerHTML += "arr에서 pop : " + arr.pop() + "<br>";
area8.innerHTML += "arr에 pop 수행 후 : " + arr + "<br>";
arr.pop();
arr.pop();
arr.pop();
arr.pop();
arr.pop();
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
}
</script>
<br>
<h4>shift() : 배열의 맨 앞의 요소 제거<br>
unshift() : 배열의 맨 앞의 요소 추가</h4>
<div id="area9" class="area"></div>
<button onclick="methodTest7();">확인하기</button>
<script type="text/javascript">
function methodTest7() {
var area9 = document.getElementById("area9");
var arr = ['야구', "축구", "볼링", "탁구", "테니스"];
area9.innerHTML += "arr의 기본값 : " + arr.shift() + "<br>";
area9.innerHTML += "arr에 shift하면? : " + arr.shift() + "<br>";
area9.innerHTML += "arr 다시 출력 : " + arr + "<br>";
area9.innerHTML += "arr에 unshift하면? : " + arr.unshift("당구") + "<br>";
area9.innerHTML += "arr 다시 출력 : " + arr + "<br>";
}
</script>
<br>
<h4>slice() : 배열의 요소 선택해서 잘라내기<br>
splice() : 배열의 index위치의 요소 제거 및 추가</h4>
<div id="area10" class="area"></div>
<button onclick="methodTest8();">확인하기</button>
<script type="text/javascript">
function methodTest8() {
var area10 = document.getElementById("area10");
var arr = ["자바", "라클이", "html5", "css3", "javascript"];
area10.innerHTML += "arr : " + arr + "<br>";
// slice(시작인덱스, 종료인덱스 + 1)
area10.innerHTML += "slice를 해보면 : " + arr.slice(2, 4) + "<br>";
//원본에 영향을 끼치지 않는 메소드
area10.innerHTML += "원본 arr : " + arr + "<br>";
// splice(index, 제거수, 추가값)
// 2번 인덱스부터 2개의 요소를 꺼내고, 추가값으로 대체한다.
area10.innerHTML += "splice를 해보자 : " + arr.splice(2, 2, 'spring') + "<br>";
area10.innerHTML += "원본을 다시 보면? : " + arr + "<br>";
}
</script>
<br>
<h4>toString() : 배열을 문자열로 반환한다.</h4>
<div id="area11" class="area"></div>
<button onclick="methodTest9();">확인하기</button>
<script>
function methodTest9(){
var area11 = document.getElementById("area11");
var arr = ["나는", "오늘", "부터", "다이어트를", "시작한다."];
area11.innerHTML += "기본 arr 출력 : " + arr + "<br>";
// 원본 배열에 영향을 끼치지 않고 문자열을 반환하는 함수이다.
area11.innerHTML += "toString : " + arr.toString() + "<br>";
area11.innerHTML += "arr의 자료형 : " + typeof(arr) + "<br>";
area11.innerHTML += "arr의 자료형 : " + typeof(arr.toString()) + "<br>";
area11.innerHTML += "join() : " + arr.join() + "<br>";
area11.innerHTML += "join한 자료형 : " + typeof(arr) + "<br>";
area11.innerHTML += "join에 구분자 지정하여 문자열 합치기 : " + arr.join('/') + "<br>";
}
</script>
</body>
</html>