1. 배열(array)
- 여러개의 데이터(원소)를 저장하는 공간
- 인덱스 : 0번 부터 시작.
- 자바스크립트의 배열은 다른 타입의 데이터도 함께 저장할 수 있음!!
- 크기를 지정하지 않는다.
- 공백 리터럴도 포함할 수 있음.
2. 배열에 데이터 입력 방법
1. 배열에 데이터 입력 방법 1)
var 배열명 = [원소1, 원소2, ...];
<script type="text/javascript">
//배열에 데이터 입력 방법 1)
var city = ['Seoul', 'Busan', 'Incheon'];
function printArray() {
var i;
for (i = 0; i < city.length; i++) {
document.write("[" + i + "] : " + city[i] + "<br>");
}
}
printArray();
</script>
▶ 배열의 길이 : 배열명.length
2. 배열에 데이터 입력 방법 2)
var 배열명 = [];
배열명[0]= 원소1;
배열명[1]= 원소2;
<script type="text/javascript">
//배열에 데이터 입력 방법 2)
var city2 = [];
city2[0] = '서울';
city2[1] = '인천';
city2[2] = '부산';
function printArray2() {
var i;
for (i = 0; i < city2.length; i++) {
document.write("[" + i + "] : " + city2[i] + "<br>");
}
}
city2[3] = '대구';//결론적으로 js에서 배열은 크기 지정을 안해도 되기때문에 배열에 계속 데이터를 추가할 수 있음
printArray2();
</script>
3. 배열에 공백 입력 방법
공백도 데이터로 입력됨 -> 데이터형은 undefined
<script type="text/javascript">
var city3 = ['Seoul', , 'Busan', , 'Incheon'];
function printArray3() {
var i;
for (i = 0; i < city3
.length; i++) {
document.write("[" + i + "] : " + city3[i] + "<br>");
}
}
printArray3();
document.write("<br>");
city3[1] = '대전';//비어있는 배열 1에 값 넣어줌
printArray3();
</script>
비어있는 배열에 인덱스를 지정해주고 값을 넣어주면 해당 배열 인덱스에 값이 들어가게됨.
4. 배열에 숫자, 문자열 혼합하여 입력
데이터가 숫자인지 문자열인지 햇갈리게 됨.
<script type="text/javascript">
var arr1 = [1, 2, "3", 4, 5];
printArray4();
function printArray4() {
var i;
for (i = 0; i < arr1.length; i++) {
document.write("[" + i + "] : " + arr1[i] + "<br>");
}
}
addAll();
function addAll() {
var sum = 0, i;
for (i = 0; i < arr1.length; i++) {
sum += arr1[i];
}
document.write("총합 : " + sum + "<br>");
}
</script>
이렇게 출력하면 "총합 : 3345"이렇게 출력됨
-> 1+2까지는 number로 인식 되어서 더해진 값인 3이 출력되고 3부터는 string으로 인식되어서 3,4,5순서대로 출력되어서 전체적으로 3345가 출력된 것!!!
위와같은 문제를 해결하기위해서,
변수에 저장된 값이 string이면 sum실행 안하는 조건을 추가해준다.
<script type="text/javascript">
var arr1 = [1, 2, "3", 4, 5];
printArray4();
function printArray4() {
var i;
for (i = 0; i < arr1.length; i++) {
document.write("[" + i + "] : " + arr1[i] + "<br>");
}
}
addAll();
function addAll() {
var sum = 0, i;
for (i = 0; i < arr1.length; i++) {
var r = typeof arr1[i];//typeof로 데이터형을 변수에 저장하고
if(r != 'string') {//변수에 저장된 값이 string이면 sum실행 안함
sum += arr1[i];
}
}
document.write("총합 : " + sum + "<br>");
}
</script>문자열인 "3"을 제외한 총합이 출력된다.
5. 배열을 활용한 자료구조
PUSH | POP | UNSHIFT | SHIFT
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열을 활용한 자료구조</title>
</head>
<body>
<button onclick="arrPush()">push</button><br>
<button onclick="arrPop()">pop</button><br>
<button onclick="arrUnshift()">unshift</button><br>
<button onclick="arrShift()">shift</button><br>
<script type="text/javascript">
var arrNum = new Array();//배열 생성 방법
var i;
for (i = 0; i < 5; i++) {
arrNum[i] = i + 1;
}
console.log(arrNum);
i++;
//push() : 배열의 마지막 위치 다음에 원소 추가.
function arrPush() {
arrNum.push(i);
i++;
console.log(arrNum);
}
//pop() : 배열의 마지막 위치의 값을 꺼내온다. (마지막 원소를 제거하면서 꺼내옴)
function arrPop() {
var r = arrNum.pop(i);
console.log(r); //꺼내온 값
console.log(arrNum);//pop 실행 후 배열의 상태
}
//unshift : 배열의 맨앞에 원소를 추가한다.
function arrUnshift() {
arrNum.unshift(i);
i++;
console.log(arrNum);
}
//shift : 배열의 맨앞의 원소를 꺼내온다.
function arrShift() {
var r = arrNum.shift();
console.log(r);
console.log(arrNum);
}
</script>
</body>
</html>
콘솔창>>
PUSH 실행 시 -> 배열의 마지막 위치 다음에 원소 추가.
POP 실행 시 -> 배열의 마지막 위치의 값을 꺼내온다. (마지막 원소를 뽑아오면서 꺼내옴)
UNSHIFT 실행 시 -> 배열의 맨앞에 원소를 추가한다.
SHIFT 실행 시 -> 배열의 맨앞의 원소를 꺼내온다.
6. 배열용 함수들
- 병합 : .join(" ");
- 제거 : delete arrayName[idx];
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열용 함수들</title>
</head>
<body>
<button onclick="join()">병합</button><br>
<button onclick="del()">제거</button><br>
<script type="text/javascript">
function join() {
var arr = ["A", "B", "C", "D", "E"];
var arrStr = arr.join("-");
console.log(arrStr);
var arrStr = arr.join("@@@");
console.log(arrStr);
console.log(arr);//원본은 확인해보면 변경없음을 알 수 있다.
}
function del() {
var arr = ["A", "B", "C", "D", "E"];
delete arr[2];
var rrr = typeof arr[2];//의문~~
console.log(rrr);
console.log(arr);
arr[2] = "New";//새로운 값 넣어줌
console.log(arr);
}
</script>
</body>
</html>
병합을 누르면 원소와 원소 사이에 지정된 문자열 병합해줌 -> 출력화면에서만 병합되어서 보여지고 실제 배열에는 영향을 주지 않는다.
삭제를 누르면 해당 배열의 자리가 'empty'상태로 바뀜 -> undefined와는 다름
splice 함수의 활용
- 부분삭제 : .splice(index[i], n)
- 위치지정추가 : .splice(index[i], n, " ", " ")
slice 함수의 활용
: 지정된 범위의 원소들을 복사하여 새로운 배열로 생성.
배열명.slice(n,m); -> n번 원소부터 m-1번 원소까지 복사
- 범위자르기 : .slice(index[i], index[j])
slice는 splice와 달리 원래 배열이 변경되지 않음!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열용 함수들</title>
</head>
<body>
<button onclick="spliceDel()">부분삭제</button><br>
<button onclick="spliceAdd()">위치지정추가</button><br>
<button onclick="sliceEx()">범위자르기</button><br>
<script type="text/javascript">
//splice 함수의 활용
var arry = ["가", "나", "다", "라", "마"]
function spliceDel() {
var r = arry.splice(1, 3);//index[1] 부터 3개 잘라냄
console.log(arry);//남은 배열 확인
console.log(r);//잘라낸 데이터 저장해둔거 확인해보기
}
function spliceAdd() {
arry.splice(2, 2, "C", "D");
console.log(arry);//남은 배열 확인
console.log(r);//잘라낸 데이터 저장해둔거 확인해보기
}
//slice 함수의 활용
function sliceEx() {
sarry = [0, 1, 2, 3, 4, 5];
var newArr = sarry.slice(1, 3);
console.log(newArr);//추출한 배열 확인할 수 있음
console.log(sarry);//원본 배열 유지되어 있는 거 확인 할 수 있음
}
</script>
</body>
</html>
원래의 배열 arry = ["가", "나", "다", "라", "마"] 에서 부분삭제를 누르면 index[i]부터 설정한 n개 잘라냄
index[2] 부터 2개 덮어쓰기로 지정된 문자열 삽입 -> 0개로 설정하면 지정된 index번호 뒤에 데이터가 추가 삽입되고 뒤에 오는 배열은 뒤로 밀려남.
index[1] 부터 index[3]전까지 추출해옴. -> 원본은 그대로 유지(splice와의 차이점)
- 정렬 : .sort();
- 역순 : .reverse();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열용 함수들</title>
</head>
<body>
<button onclick="sortEx()">정렬</button><br>
<button onclick="reverseEx()">역순</button><br>
<script type="text/javascript">
//sort(), reverse() 함수
var sortArr = [6, 2, 1, 4, 3, 5];
function sortEx() {
sortArr.sort();
console.log(sortArr);
}
var reverseArr = [6, 2, 1, 4, 3, 5];
function reverseEx() {
sortArr.reverse();
console.log(sortArr);//역순으로 정렬됨 확인(내림차순 아님! 걍 역순)
}
</script>
</body>
</html>
오름차순으로 정렬됨 확인(사전 식으로 정렬됨~ : 첫번째 글자끼리 비교 -> 두번째 글자끼리 비교. 즉, 숫자가 큰 순서가 아닌 사전식 비교)
역순으로 정렬됨 확인(내림차순 아님! 걍 역순)
- forEach : forEach()
- every : everyEx()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열용 함수들</title>
</head>
<body>
<button onclick="forEachEx()">forEach</button><br>
<button onclick="everyEx()">every</button><br>
<script type="text/javascript">
//foreach() 함수 활용
var nums = [1, 2, 3, 4, 5, 6];
function forEachEx() {
nums.forEach(square);//배열에서 하나씩 꺼내와서 함수로 매개변수로 넣어줌
}
function square(num) {
var result = num * num;//제곱
console.log(num, result);
}
//everyEx() 함수 활용
var nums2 = [10, 2, 30, 4, 50, 6];
function everyEx() {
var even = nums.every(isEven);//홀수가 있어서 false 나옴
console.log(even);
var even = nums2.every(isEven);//모두 짝수라서 true 나옴
console.log(even);
}
function isEven(num) {
return num % 2 == 0;
}
</script>
</body>
</html>
하나씩 꺼내오면서 각각 실행할 함수 지정 가능
모든 경우값이 true일 때 true 결과값 출력 or 하나라도 false가 있다면 false로 결과값 출력됨
