배열 :
자바스크립트(js)에서는 변수 선언 시 별도의 자료형 지정
어떤 자료형이든 배열에 담을 수 있다
따라서 크기(길이)의 제약도 없다(자바 컬렉션과 유사함)
<button onclick="test1();">테스트 (1)</button>
<div id="area1" class="area"></div>
<script>
function test1(){
// 배열 객체 선언 및 초기화
let arr = ["기다운","한남동",20,true,[10,20,30],{}];
// => 배열 객체에는 자료형 상관 없이 어떠한 값도 저장 가능!
console.log(arr);
console.log(arr[0]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[5]);
console.log(arr[4][1]);
let harr = document.getElementById("area1");
for(let a of arr){
harr.innerHTML += a + "<br>"
}
}
어떠한 자료형 상관 없이 저장이 가능하다
인덱스를 통해서 접근이 가능하다.
배열의 선언 :
let arr1 = new Array();
arr1[0] = "수박";
arr1[1] = "귤";
arr1[2] = "사과";
arr1[9] = "바나나"; // 배열의 길이: 10. 인덱스 3~8까지는 비어있는 상태
arr1 배열에
0번 인덱스부터 2번 인덱스까지 3개의 값을 초기화 하고
그 이전 숫자는 건너 뛰고
9번 인덱스에 값을 추가 시
배열의 길이는 10으로 저장이 된다
// 배열 선언과 동시에 값을 초기화
let arr4 = new Array("아이유","카리나","윈터","장원영");
let arr5 = ["아이유","카리나","윈터","최종군"];
배열 관련 함수(메소드) :
1) 배열명.indexOf(찾고자 하는 값)
indexOf : 해당 값이 있으면 인덱스값을 반환하게 된다
해당 값이 없는 경우 -1을 반환한다
let selFruit = prompt("찾는 과일이 있습니까");
if(selFruit == null || selFruit == ''){
alert("입력된 값이 없습니다");
} else if(fruits.indexOf(prompt(selFruit) > -1)){
alert("찾았습니다");
}else{
alert("못찾았습니다");
}
}
사용자 알림창을 뜨게 만든다
찾는 과일이 있는 지 묻고
사용자가 입력한 값이 배열 안에 존재하면 찾았습니다를
알림창에 출력
사용자가 입력한 값이 배열 안에 존재하지 않는다면
알림창에 못 찾았습니다를 출력한다
배열 결합 :
배열명.concat(배열명, 배열명)
concat 사용 시 원본 배열에 영향을 주지 않는다
합쳐진 배열을 반환
<p>
배열에 담긴 값들을 역순으로 바꿔주는 함수
</p>
<button onclick="reverseTest();">역순 테스트</button>
<div id="area4" class="area"></div>
<script>
function reverseTest(){
let arr = [1,2,3,4,5];
let area4 = document.getElementById("area4");
area4.innerHTML = "원본 배열 " + arr +"<br>";
area4.innerHTML += "순서 변경 " + arr.reverse() +"<br>";
area4.innerHTML += "arr " + arr;
// reverse()함수를 사용하는 순간 원본 배열의 순서도 변경됨.
}
</script>
배열명.sort()
배열 내의 값을 오름차순으로 정렬 시키는 함수이다
원본 배열에 영향을 준다.
5) 배열에 값을 추가/제거
추가 배열명.push(추가할 값)
배열의 맨 뒤에 값을 추가하고, 배열 크기를 반환
제거 : 배열명.pop()
배열의 맨 뒤에 값을 제거하고, 그 값을 반환한다
<h3>6) 배열의 값을 추가/제거 (2)</h3>
<h4>* 추가 : 배열명.unshift(추가할 값)</h4>
<p>
배열의 맨 앞에 값을 추가하고, 배열의 크기를 반환
</p>
<h4>* 삭제 : 배열명.shift()</h4>
<p>
배열의 맨 앞에 값을 제거하고, 그 값을 반환
</p>
<button onclick="inoutTest2();">확인</button>
<div id="area7" class="area"></div>
<script>
function inoutTest2(){
let arr =["에스파","뉴진스","아이브","일기예보","프로미스나인","아일릿"];
const area7 = document.getElementById("area7");
area7.innerHTML = "아이돌 : " + arr + "<br>";
area7.innerHTML += "그룹 하나 제거 : " + arr.shift() + " 제거..;-; <br>"
arr.unshift("라이즈");
area7.innerHTML = "아이돌 : " + arr + "<br>";
// => unshift(), shift() 함수도 원본 배열에 영향을 줌!
}
</script>
배열의 맨 앞에 값을 추가하고, 배열의 크기를 반환한다.
7) 배열 요소 추출하기 :
배열명.slice(시작 인덱스, 끝 인덱스)
배열에서 시작 인덱스 위치부터 끝 인덱스 전까지
배열의 값들을 추출한다
배열명.splice(시작 인덱스, 제거할 개수[, 추가할 값])
배열에서 시작 인덱스 위치부터 개수만큼 추출하여 제거하고
(+ 데이터를 추가할 수 있도록 해주는 함수이다)
<button onclick="sliceTest();">확인</button>
<div id="area8" class="area"></div>
<script>
function sliceTest(){
let area8 = document.querySelector("#area8");
let arr = ["java","sql","python","javascript","html","css"];
area8.innerHTML = "arr : " + arr + "<br>";
let arr2 = arr.slice(2, 4);
// end 값은 포함이 안된다.
area8.innerHTML += "구분 "+ arr2 + "<br>";
area8.innerHTML += "구분2 " + arr;
// 원본 배열에 영향을 주지 않음!
let arr3 = arr.splice(2, 2, "spring");
area8.innerHTML +=" splice 사용 " + arr3
area8.innerHTML +=" splice 사용 후" + arr
// splice() 함수는 원본 배열에 영향을 준다.
}
</script>
splice() 함수는 원본 배열에 영향을 준다
8) 배열을 문자열로 변환하기
배열명.toString
배열명.join([구분자])
배열의 각 인덱스에 담긴 값을 하나의 문자열로 반환해주는 함수이다
<button onclick="toStringTest();">gg</button>
<div id="area9" class="area"></div>
<script>
function toStringTest(){
let arr = ["나는","오늘","점심에","백반을","먹었습니다"];
let area9 = document.querySelector("#area9");
area9.innerHTML = "arr : " + arr;
area9.innerHTML += "arr.toString() : " + arr.toString() + "<br>";
// => 객체를 화면에 출력하면 객체.toString()이 호출되고 있었다..!
area9.innerHTML += "arr JOIN: " + arr.join(" ") + "<br>";
}
</script>