[11일] JavaScript (5) - 배열, 연습문제

배열 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, ~~~
• 정렬 유형

1. 오름차순(Ascending. ASC) : 1->10, A->Z, a->z
2. 내림차순(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>