Notice
Recent Comments
Recent Posts
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Today
Total
관리 메뉴

기록 ＞ 기억

[JavaScript] 배열 (Array) 본문

IT국비지원

[JavaScript] 배열 (Array)

BY SON 2021. 9. 14. 19:47

배열 (Array)

 

● 배열 선언

 let a = new Array();  배열의 크기를 지정하지 않고 선언
 let a = new Array(5);  배열의 크기를 지정하고 선언
 let a = new Array(1, 2, 3, 4, 5);  초기값 사용 선언
 let a = [1, 2, 3, 4, 5];  JSON 형식 선언
 let a = new Array(3);
 a[0] = new Array(5);		  다차원 배열 선언 
/*
	Name	Kor	Eng	Avg	Grade
	-------------------------------------
	Kim	50	60	55	F	
	Lee	70	78	74	C	
	Hong	100	20	60	D	
	Park	100	100	100	A	
	
	1. 국어 점수와 영어 점수의 평균 구하기
	2. 평균점수에 따른 학점 구하기(90점 ↑ : A, 80점 ↑ : B, 70점 ↑ : C, 60점 ↑ : D, 그 외 : F)
*/
let score = new Array(4);

score[0] = new Array("Kim", 50, 60, 0, "");	
score[1] = new Array("Lee", 70, 78, 0, "");
score[2] = ["Hong", 100, 20, 0, ""];
score[3] = ["Park", 100, 100, 0, ""];
		
for(let i=0; i<score.length; i++) {
	//평균 구하기
	score[i][3] = (score[i][1] + score[i][2])/2; 
	
	//학점 구하기
	switch(parseInt(score[i][3]/10)) {	
		case 10 :
		case 9 : score[i][4] = "A"; break;
		case 8 : score[i][4] = "B"; break;
		case 7 : score[i][4] = "C"; break;
		case 6 : score[i][4] = "D"; break;
		default : score[i][4] = "F"; break;
	}
}

//데이터 확인
for(let i=0; i<score.length; i++) {
	for(let j=0; j<score[i].length; j++) {
		document.write(score[i][j] + "&emsp;");
	}
	document.write("<br>");
}

 

● 배열 함수

함수명 설 명
concat  두개의 배열을 합쳐서 하나의 배열로 만듬
join  배열의 항목들을 구분 할 때 사용 할 구분자 (default : 콤마)
reverse  배열의 순서를 바꿈
slice (begin, end)  배열의 일부분을 복사해서 객체로 반환 ( begin <= 값 < end )
splice (begin, delCnt, item...)  배열의 요소를 삭제하거나 추가
 sort   배열을  정렬  (default : 오름차순) 
let epl = ["Tottenham Hotspur", "Manchester United", "Liverpool"];
let kl = ["울산", "전북", "포항", "서울"];

let all = epl.concat(kl);
document.write(all, "<br>");
//결과 --> Tottenham Hotspur,Manchester United,Liverpool,울산,전북,포항,서울

document.write(all.join("--"), "<br>");
//결과 --> Tottenham Hotspur--Manchester United--Liverpool--울산--전북--포항--서울

document.write(all.reverse(), "<br>");
//결과 --> 서울,포항,전북,울산,Liverpool,Manchester United,Tottenham Hotspur

document.write(kl.sort(), "<br>");
//결과 --> 서울,울산,전북,포항
let animals = ["강아지", "고양이", "곰", "여우", "닭", "돼지", "소"];
document.write(animals.slice(1,5), "<br>");
//결과 : 고양이,곰,여우,닭

document.write(animals.splice(2,3), "<br>");
//결과 : 곰,여우,닭 (삭제된 요소들)
document.write(animals, "<br>");
//결과 : 강아지,고양이,돼지,소
document.write(animals.splice(1,1,"야옹이"), "<br>");
//결과 : 고양이 (삭제된 요소)
document.write(animals, "<br>");
//결과 : 강아지,야옹이,돼지,소

 

● 숫자 정렬 문제 → 숫자를 문자열로 인식

let number = [21, 20, 10, 55, 100, 33, 75, 4];
document.write(number.sort(), "<br>");
//예상 --> 4,10,20,21,33,55,75,100
//결과 --> 10,100,20,21,33,4,55,75 (????? 문자열로 인식함!!)

//오름차순 (a가 b보다 큼)
number.sort(function(a, b) {
	return a - b;
});
document.write(number, "<br>");	//결과 --> 4,10,20,21,33,55,75,100

//내림차순 (b가 a보다 큼)
number.sort(function(a, b) {
	return b - a;
});
document.write(number, "<br>");	//결과 --> 100,75,55,33,21,20,10,4

 

● 객체 정렬 → 컬럼별 정렬 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object sort</title>
<style>
	table * {
		border: 1px solid #ddd;
		text-align: center;
	}
	table tr * { padding: 5px 30px; }
	table th { background-color: #ddd; }
	table th:hover { cursor: pointer; }	
</style>
</head>
<body>
<script>	
	let orderBy = "asc";
	
	window.onload = function() {
		init();
	}
	
	//화면로드시 초기화
	function init() {
		
		//객체 선언
		let players = [
			{ play : 37, goal : 17, assist : 10, name : "son" },
			{ play : 35, goal : 23, assist : 14, name : "kane" },
			{ play : 37, goal : 22, assist : 5, name : "shala" },
			{ play : 37, goal : 18, assist : 12, name : "fernandes" },
			{ play : 28, goal : 13, assist : 2, name : "gundogan" },
			{ play : 20, goal : 11, assist : 2, name : "bale" }
		];
		
		//화면 그리기
		drawing(players);
		
		//header 클릭한 컬럼 기준으로 정렬
		document.addEventListener("click",function(e){
			if(e.target && e.target.id == "name"){
				objSort(players, "name");
			} else if(e.target && e.target.id == "play") {
				objSort(players, "play");
			} else if(e.target && e.target.id == "goal") {
				objSort(players, "goal");
			} else if(e.target && e.target.id == "assist") {
				objSort(players, "assist");
			}
			//정렬 후 다시 그리기
			drawing(players);
		});
	}
	
	//화면 동적으로 그리기
	function drawing(obj) {
		
		//header
		let html = "<table>"
			 +	 "<tr>"
			 +		"<th id='name'>이름</th>"
			 +		"<th id='play'>경기수</th>"
			 +		"<th id='goal'>득점</th>"
			 +		"<th id='assist'>도움</th>"
			 +	 "</tr>";
		//body		 
		for(let i=0; i<obj.length; i++) {
			html +=	 "<tr>"
			 +		"<td>" + obj[i].name + "</td>"
			 +		"<td>" + obj[i].play + "</td>"
			 +		"<td>" + obj[i].goal + "</td>"
			 +		"<td>" + obj[i].assist + "</td>"
			 + 	 "</tr>";
		}
		html += "</table>";
		
		document.body.innerHTML = html;
	}
		
	//객체 정렬하기
	function objSort(obj, colName) {
		
		if(orderBy == "asc") {	//오름차순 정렬
			orderBy = "desc";
			
			obj.sort(function(a, b){
				if(a[colName] > b[colName]) {
					return 1;
				}else if(a[colName] < b[colName]) {
					return -1;
				}					
			});
		} else {	//내림차순 정렬			
			orderBy = "asc";
		
			obj.sort(function(a, b){
				if(a[colName] > b[colName]) {
					return -1;
				}else if(a[colName] < b[colName]) {
					return 1;
				}					
			});
		}		
	}			
</script>
</body>
</html>
/* 동적으로 생성된 HTML 태그는 이벤트가 적용 안되는 문제 */

//javascript
document.getElementById("name").onclick = function() {}; //이벤트 먹통
document.getElementById("name").addEventListener("click", function() {}); //이벤트 작동

//jquery
$("#name").click(function() {}); //이벤트 먹통
$(document).on("click", "#name", function() {}); //이벤트 작동

 

저작자표시 비영리

'IT국비지원' 카테고리의 다른 글

[JavaScript] 폼 객체, 내장 객체, 윈도우 객체  (0) 2021.09.17
[Algorithm] 정렬 알고리즘  (0) 2021.09.17
[JavaScript] 함수 (function)  (0) 2021.09.15
[JavaScript] 제어문 ② 반복문 (for, while, do while, for in, for of)  (0) 2021.09.08
[JavaScript] 제어문 ① 조건문 (if, switch)  (0) 2021.09.08
[JavaScript] 연산자  (0) 2021.09.07
[JavaScript] 작성위치, 변수와 상수  (0) 2021.09.06
'IT국비지원' Related Articles more
Comments