웹개발 교육/JavaScript
[11일] JavaScript (5) - 배열, 연습문제
ewok
2022. 8. 9. 18:45
배열 Array
연속성 자료형, 열거형, 컬렉션
하나의 변수에 1개 이상의 값을 저장할 수 있는 공간
element, 요소, 원소 (노란색 박스)
index, 순서, 색인 (0부터 시작해서 1씩 증가한다)
let kor = []; // 배열 선언
kor[0] = 10; // 배열 요소의 인덱스는 0부터 시작한다
kor[1] = 20; // 배열 요소의 인덱스는 1씩 증가한다
kor[2] = 30;
document.write(kor[0]);
document.write(kor[1]);
document.write(kor[2]);
document.write("<hr>");
let names = [];
names[0] = "무궁화";
names[1] = "개나리";
names[2] = "진달래";
document.write(names[0]);
document.write(names[1]);
document.write(names[2]);
document.write("<hr>");
// 배열 선언
// let points = []; // Good
// let points = new Array(); // Bad
// 배열 선언 및 초기화
let points = [40, 100, 25, 3, 7];
document.write(points[0]); //40
document.write(points[1]); //100
document.write(points[2]); //25
document.write(points[3]); //3
document.write(points[4]); //7
document.write("<hr>");
document.write(points.length); //배열 요소의 갯수 5
document.write("<hr>");
document.write(points); //배열 요소 전체 40, 100, 25, 3, 7
for(let i=0; i<points.length; i=i+1){
document.write(points[i]);
} //for end
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6]="Lemon";
document.write(fruits.length); // 배열 요소의 갯수 7
document.write(fruits[6]); // Lemon
document.write(fruits[4]); // undefined
document.write(fruits[5]); // undefined
document.write(fruits[8]); // undefined
document.write("<hr>");
fruits[8]="kiwi";
document.write(fruits.length); // 배열 요소의 갯수 9
배열 메소드(함수)
toSring(), length, join()
let fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits); // Banana,Orange,Apple,Mango
document.write("<hr>");
document.write(fruits.toString()); //"Banana,Orange,Apple,Mango"
document.write("<hr>");
document.write("#"+fruits.toString()+"#"); //#은 의미 없음. 문자열이라는 표기하려고. //#Banana,Orange,Apple,Mango#
document.write("<hr>");
document.write(fruits.length); // 4 배열 요소의 갯수
document.write("<hr>");
document.write(fruits.toString().length); // 25 문자열 변환 후 글자 갯수
document.write("<hr>");
document.write(fruits.join("*")); // Banana*Orange*Apple*Mango
document.write("<hr>");
pop(), push()
fruits.pop() // 배열 마지막 요소 제거
document.write(fruits); //"Banana,Orange,Apple"
document.write("<hr>");
fruits.push("Kiwi"); // 배열 마직막 요소 추가
document.write(fruits); // "Banana,Orange,Apple,Kiwi"
document.write("<hr>");
shift(), unshift()
fruits.shift(); // 배열 맨 앞 요소 제거
document.write(fruits); // Orange,Apple,Kiwi
document.write("<hr>");
fruits.unshift("Lemon"); // 배열 맨 앞 요소 추가
document.write(fruits); // Lemon,Orange,Apple,Kiwi
document.write("<hr>");
splice()
fruits.splice(0, 2); // 0번째부터 (2-1)번째까지 제거
document.write(fruits); // "Apple,Kiwi"
concat()
//배열 요소 합치기
let arr1 = ["손흥민", "김연아"];
let arr2 = ["무궁화", "개나리", "진달래"];
let arr3 = ["국어", "영어"];
let arr4 = arr1.concat(arr2, arr3);
document.write(arr4); // 손흥민,김연아,무궁화,개나리,진달래,국어,영어
document.write("<hr>");
document.write(arr4.length); // 7
document.write("<hr>");
정렬
- 어떤 Key값을 기준으로 순서대로 재배치
- 정렬 방식 : insertion sort (삽입 정렬), selection sort (선택 정렬), bubble sort, ~~~
- 정렬 유형
- 오름차순(Ascending. ASC) : 1->10, A->Z, a->z
- 내림차순(Descending. DESC)
1. 문자형
fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // 배열 요소 오름차순 정렬
document.write(fruits); // Apple,Banana,Mango,Orange
document.write("<hr>");
fruits.reverse(); // 배열 요소 내림차순 정렬
document.write(fruits); // Orange,Mango,Banana,Apple
document.write("<hr>");
2. 숫자형
let points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); // sort()만 쓰면 1,10,100,25,40,5 이렇게 정렬됨
document.write(points); // 오름차순 1, 5, 10, 25, 40, 100
document.write("<hr>");
points.sort(function(a, b){return b - a});
document.write(points); // 내림차순 100, 40, 25, 10, 5, 1
document.write("<hr>");
연습문제
let num = [7, 8, -9, 5, 6];
let size = num.length; //5문제 1
//문1)배열 요소의 전체 합을 구하시오
let sum =0; // 전체 합
for (let i=0; i<num.length; i=i+1) {
sum = num[i] + sum
}
document.write(sum); // 17
document.write("<hr>");
document.write("<hr>");
// 풀이 예시
// 1)
document.write(num[0]+num[1]+num[2]+num[3]+num[4]);
document.write("<hr>");
// 2)
let hap = 0;
for(let i=0; i<size; i=i+1){
hap = hap + num[i];
} // for end
document.write(hap);
document.write("<hr>");
문제 2
//문2)음수의 갯수를 구하시오
let negative = 0;
for (let j=0; j<num.length; j=j+1) {
if (num[j]<0) {
negative = negative + 1
}
}
document.write("음수의 갯수 : " + negative); // 1
document.write("<hr>");
document.write("<hr>");
// 풀이 예시
/*
7<0 if(num[0]<0)
8<0 if(num[1]<0)
-9<0 if(num[2]<0) count=count+1
5<0 if(num[3]<0)
6<0 if(num[4]<0)
*/
let count = 0;
for(let i=0; i<size; i=i+1) {
if(num[i]<0){
count=count+1
} //if end
} //for end
document.write("음수의 갯수 : " + negative);
document.write("<hr>");
문제 3
//문3)최대값, 최소값을 각각 구하시오
let max = 0;
max = num[0]>num[1] ? num[0] : num[1];
max = max>num[2] ? max : num[2];
max = max>num[3] ? max : num[3];
max = max>num[4] ? max : num[4];
let min = 0;
min = num[0]<num[1] ? num[0] : num[1];
min = min<num[2] ? min : num[2];
min = min<num[3] ? min : num[3];
min = min<num[4] ? min : num[4];
document.write("최대값 : " + max);
document.write("<hr>");
document.write("최솟값 : " + min);
document.write("<hr>");
document.write("<hr>");
// 풀이 예시
// 1)
document.write("최대값 : " + Math.max(...num));
document.write("<hr>");
document.write("최솟값 : " + Math.min(...num));
document.write("<hr>");
// 2)내림차순 정렬한 후, 최대값 구하기
// num.sort(function(a, b){return b - a});
// document.write("최대값 : " + num[0]); //최대값
// document.write("<hr>");
// document.write("최솟값 : " + num[size-1]); //최소값
// document.write("<hr>");
// 3)
let max2=num[0]; //최대값
let min2=num[0]; //최소값
/*
7<7 if(max<num[0])
7<8 if(max<num[1]) max2=num[1]
8<-9 if(max<num[2])
8<5 if(max<num[3])
8<6 if(max<num[4])
*/
for(let i=0; i<size; i=i+1){
if(max2<num[i]) max2=num[i];
if(min2>num[i]) min2=num[i];
} //for end
document.write("최대값 : " + max2);
document.write("<hr>");
document.write("최소값 : " + min2);
document.write("<hr>");
문제 4
//문4)num[4]요소의 등수를 구하시오
let grade = 1;
for (let l=0; l<num.length; l=l+1) {
if(num[4] < num[l]) {
grade = grade + 1;
}
}
document.write(grade + "등"); // 3등
document.write("<hr>");
document.write("<hr>");
// 풀이 예시
/*
6<7 if(num[4]<num[0]) r=r+1
6<8 if(num[4]<num[1]) r=r+1
6<-9 if(num[4]<num[2])
6<5 if(num[4]<num[3])
6<6 if(num[4]<num[4])
*/
let r=1;
for(let i=0; i<size; i=i+1){
if(num[4]<num[i]){
r=r+1;
} //if end
} //for end
document.write("num[4] 요소의 등수 : " + r);
document.write("<hr>");
문제 5
//문5) num배열 요소의 각각의 등수를 모두 구하시오
// 8이 1등, 7이 2등 ...
let number = 0;
let eachgrade = 0;
num.sort(function(a, b){return b - a}); // 8, 7, 6, 5, -9
for (let m=0; m<num.length; m=m+1) {
number = num[m];
eachgrade = m + 1;
document.write(number + " : " + eachgrade + "등"); // 8 : 1등, 7 : 2등, 6 : 3등, 5 : 4등, -9 : 5등
document.write("<hr>");
}
// 풀이 예시
/*
7<7 if(num[0]<num[0])
7<8 if(num[0]<num[1]) rank[0]=rank[0]+1
7<-9 if(num[0]<num[2])
7<5 if(num[0]<num[3])
7<6 if(num[0]<num[4])
8<7 if(num[1]<num[0])
8<8 if(num[1]<num[1])
8<-9 if(num[1]<num[2])
8<5 if(num[1]<num[3])
8<6 if(num[1]<num[4])
-9<7 if(num[2]<num[0]) rank[2]=rank[2]+1
-9<8 if(num[2]<num[1]) rank[2]=rank[2]+1
-9<-9 if(num[2]<num[2])
-9<5 if(num[2]<num[3]) rank[2]=rank[2]+1
-9<6 if(num[2]<num[4]) rank[2]=rank[2]+1
*/
let rank=[1, 1, 1, 1, 1];
for(let i=0; i<size; i=i+1){
for(let j=0; j<size; j=j+1){
if(num[i]<num[j]){
rank[i]=rank[i]+1
} //if end
} //for end
} //for end
document.write("num배열 요소의 각 등수 : " + rank);
성적 프로그램 만들기
<body>
<h3>성적 프로그램</h3>
<div id="demo"></div>
<script>
//문) 5명의 학생을 대상으로 평균, 과락, 평균10점당 * 한개씩, 장학생을 구한후
// 결과값을 표작성해서 id=demo에 출력하시오
/*
출력결과
--------------------------------------------------------
이름 국어 영어 수학 평균 등수 결과
--------------------------------------------------------
라일락 100 100 100 100 1 합격 ********** 장학생
진달래 20 50 30 33 5 불합격 ***
개나리 90 95 90 91 2 합격 *********
무궁화 70 80 60 70 4 합격 *******
홍길동 35 100 100 78 3 재시험 *******
--------------------------------------------------------
*/
let uname= ["라일락","진달래","개나리","무궁화","홍길동"];
let kor = [100, 50, 95, 80, 60];
let eng = [100, 55, 95, 85, 40];
let mat = [100, 60, 35, 90, 30];
let size = uname.length; //5
// 평균 구하기
let aver = [];
for (let a=0; a<kor.length; a=a+1) {
aver[a] = parseInt((kor[a]+eng[a]+mat[a])/3)
}
// document.write(aver); // 100, 55, 75, 85, 43
// 등수 구하기
let rank = [1, 1, 1, 1, 1];
for (let a=0; a<aver.length; a=a+1) {
for (let b=0; b<aver.length; b=b+1) {
if (aver[a]<aver[b]) {
rank[a] = rank[a] + 1;
} //if end
} //for end
} //for end
// document.write(rank); // 1, 4, 3, 2, 5
// 합불 구하기
let pass = [];
for (let a=0; a<aver.length; a=a+1) {
if (aver[a]>=70) {
if (kor[a]<40 || eng[a]<40 || mat[a]<40) {
pass[a] = "재시험";
} else {
pass[a] = "합격";
}
} else {
pass[a] = "불합격";
}
}
// document.write(pass); // 합격, 불합격, 재시험, 합격, 불합격
// 별점
let star = [];
let starcnt = "";
for (let b=0; b<aver.length; b=b+1) {
for (let a=0; a<Math.floor((aver[b]/10)); a=a+1) {
starcnt = starcnt + "*";
}
star[b] = starcnt;
starcnt = "";
}
// document.write(star); // **********, *****, *******, ********, ****
// 장학생 여부
let scholar = [];
for (let a=0; a<aver.length; a=a+1) {
if(aver[a]>=95) {
scholar[a] = "장학생";
} else {
scholar[a] = "";
}
}
document.write(scholar); // 장학생,,,,
// 표 그리기
let result = ""; // 결과값
result = result + "<table border=1>"
result = result + "<tr>"
result = result + "<th>이름</th>"
result = result + "<th>국어</th>"
result = result + "<th>영어</th>"
result = result + "<th>수학</th>"
result = result + "<th>평균</th>"
result = result + "<th>등수</th>"
result = result + "<th colspan=3>결과</th>"
result = result + "</tr>"
result = result + "<tr>"
result = result + "<td>" + uname[0] + "</td>"
result = result + "<td>" + kor[0] + "</td>"
result = result + "<td>" + eng[0] + "</td>"
result = result + "<td>" + mat[0] + "</td>"
result = result + "<td>" + aver[0] + "</td>"
result = result + "<td>" + rank[0] + "</td>"
result = result + "<td>" + pass[0] + star[0] + scholar[0] + "</td>"
result = result + "</tr>"
result = result + "<tr>"
result = result + "<td>" + uname[1] + "</td>"
result = result + "<td>" + kor[1] + "</td>"
result = result + "<td>" + eng[1] + "</td>"
result = result + "<td>" + mat[1] + "</td>"
result = result + "<td>" + aver[1] + "</td>"
result = result + "<td>" + rank[1] + "</td>"
result = result + "<td>" + pass[1] + star[1] + scholar[1] + "</td>"
result = result + "</tr>"
result = result + "<tr>"
result = result + "<td>" + uname[2] + "</td>"
result = result + "<td>" + kor[2] + "</td>"
result = result + "<td>" + eng[2] + "</td>"
result = result + "<td>" + mat[2] + "</td>"
result = result + "<td>" + aver[2] + "</td>"
result = result + "<td>" + rank[2] + "</td>"
result = result + "<td>" + pass[2] + star[2] + scholar[2] + "</td>"
result = result + "</tr>"
result = result + "<tr>"
result = result + "<td>" + uname[3] + "</td>"
result = result + "<td>" + kor[3] + "</td>"
result = result + "<td>" + eng[3] + "</td>"
result = result + "<td>" + mat[3] + "</td>"
result = result + "<td>" + aver[3] + "</td>"
result = result + "<td>" + rank[3] + "</td>"
result = result + "<td>" + pass[3] + star[3] + scholar[3] + "</td>"
result = result + "</tr>"
result = result + "<tr>"
result = result + "<td>" + uname[4] + "</td>"
result = result + "<td>" + kor[4] + "</td>"
result = result + "<td>" + eng[4] + "</td>"
result = result + "<td>" + mat[4] + "</td>"
result = result + "<td>" + aver[4] + "</td>"
result = result + "<td>" + rank[4] + "</td>"
result = result + "<td>" + pass[4] + star[4] + scholar[4] + "</td>"
result = result + "</tr>"
result = result + "</table>"
document.getElementById("demo").innerHTML=result;
</script>
</body>