[HTML5&JavaScript] Array

고동이의 IT·2021년 11월 16일
0

HTML5&JavaScript

목록 보기
8/15
post-thumbnail

Array객체

배열을 나타내는 객체
var myArray = new Array();
myArray[0] = "apple";
myArray[1] = "banana";
myArray[2] = "orange";
배열의 크기가 자동으로 조절된다. 다른 언어에서는 배열의 크기가 고정되어 있다. 하지만 자바스크립트에서 배열의 크기는 현재 배열의 크기보다 큰 인덱스를 사용하면 자동으로 증가한다.
자바스크립트에서는 하나의 배열에 여러 가지 자료형을 혼합해서 저장할 수 있다. 즉 데이터의 종류를 다르게 하면서 배열에 저장할 수 있는 것이다. 하나의 배열에 정수와 문자열을 동시에 저장하는 것이 가능하다.

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">

<script type="text/javascript">
proc1 = () => {
	var fruit = ["사과", "바나나", "참외", "딸기",1000];
	print(fruit, "result1");
	
}

print = (fr, out) => {
	
	str ="";
	for(i=0; i<fr.length; i++){
		str+=fr[i]+" ";
	}
	
	document.getElementById(out).innerHTML = str;
}

proc2 = () => {
	var fruit =  new Array("사과",1000,2000, "바나나", "참외", "딸기");
	print(fruit, "result2");
}

proc3 = () => {
	var fruit = new Array();
	fruit[0]="사과"
	fruit[1]= 123.4567
	fruit[2]="참외"
	fruit[3]="딸기"
	
	print(fruit, "result3");
}
</script>

</head>
<body>

<div class="box">
	배열 : 많은 양의 데이터를 일괄처리하기 위해서 연속된 공간에 저장한다. <br>
	데이터타입은 구별하지 않는다. <br>
	배열의 크기가 자동으로 증가한다. <br>
	리터럴로 배열을 생성한다. <br>
	fruit = ["사과", "바나나", "참외", "딸기"]
	<br>
	<button type="button" onclick="proc1()">확인</button>
	<div id="result1">
	</div>
</div>

<div class="box">
	Array객체로 배열을 생성한다. 생성자의 파라미터로 인수를 전달한다. <br>
	fruit =  new Array("사과", "바나나", "참외", "딸기")
	<br>
	<button type="button" onclick="proc2()">확인</button>
	<div id="result2">
	</div>
</div>

<div class="box">
	Array객체로 배열을 생성한다. <br>
	fruit = new Array()<br>
	fruit[0]="사과"<br>
	fruit[1]="바나나"<br>
	fruit[2]="참외"<br>
	fruit[3]="딸기"<br>
	<button type="button" onclick="proc3()">확인</button>
	<div id="result3">
	</div>
</div>
</body>
</html>

Array 객체의 메서드

  • indexOf(item, start) 배열에서 요소를 찾아 위치를 리턴한다.
  • lastIndexOf(item, start) 역순으로 요소를 찾아 위치를 리턴한다.
  • push(a,b,c,…) 배열 끝에 요소를 추가한다.
  • pop() 마지막 요소를 제거하고 리턴한다.
  • shift() 배열 처음의 원소를 제거하고 리턴한다.
  • unshift(a,b,c,…) 배열 처음에 요소를 추가한다.
  • reverse() 배열을 거꾸로 뒤집는다.
  • sort(sortfunction) 배열을 정렬한다. 인수로 값을 비교하는 함수를 지정할 수 있으며 생략시 사전순으로 정렬된다.
  • slice(start, end) start ~ end 범위의 요소를 따로 떼어내어 새로운 배열을 만든다. 1,5일 경우 5는 제외
  • splice(index, n, a, b, c, …) 배열 일부를 수정한다. 일정 범위를 삭제하고 새로운 요소를 삽입힌다.
  • a.concat(b,c…) 여러 개의 배열을 합친다.
  • join(deli) 배열 요소를 하나의 문자열로 합친다. 구분자를 지정할 수 있으며 생략시 콤마로 구분한다.

indexOf, lastIndexOf, indexOf_start 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">

<script>
fr = ["사과", "바나나", "참외","사과","복숭아","사과","파인애플"];

function proc1(){
	
	while(true){
		//입력받아서 찾기
		frname = prompt("입력하세요");
		
		// 취소버튼
		if(frname==null){
			
			cf = confirm("취소하겠습니까?");
			if(cf){
				return false;
			}
			continue;
		}
		
		// 입력없이 확인버튼
		 if(frname.trim().length <1){
			alert("입력해라");
			continue;
		}
		break;
	}
	
	idx = fr.indexOf(frname);
	str = `찾는이름: ${frname}<br>` 
	if(idx < 0){
		
		str += "그런건없다."
	}else{
		/* 	str = "찾는 이름: "+ "사과"+"<br>"; */
	 
		str += idx + "번째에 있습니다.";
	/* 	str += `${idx}번째 있습니다.`; */		
	}


	document.getElementById('result1').innerHTML=str;
	
	
}
proc2 = () => {
	
	while(true){
		//입력받아서 찾기
		frname = prompt("입력하세요");
		
		// 취소버튼
		if(frname==null){
			
			cf = confirm("취소하겠습니까?");
			if(cf){
				return false;
			}
			continue;
		}
		
		// 입력없이 확인버튼
		 if(frname.trim().length <1){
			alert("입력해라");
			continue;
		}
		break;
	}
	
	idx = fr.lastIndexOf(frname);
	str = `찾는이름: ${frname}<br>` 
	if(idx < 0){
		
		str += "그런건없다."
	}else{
		/* 	str = "찾는 이름: "+ "사과"+"<br>"; */
	 
		str += idx + "번째에 있습니다.";
	/* 	str += `${idx}번째 있습니다.`; */		
	}


	document.getElementById('result2').innerHTML=str;
	
}

proc3 = function(){
	
	
	frname = prompt("입력하세요");
	
	idx= 0;
	
	str="찾는 이름: "+frname+"<br>";
	
	while(true){
		idx = fr.indexOf(frname, idx);
		if(idx<0){
			str +="<br>더이상 존재하지 않습니다.";
			break;
		}
		str += idx+"번째, "
		idx++;
	}
	
	
	document.getElementById('result3').innerHTML= str;
}
</script>
</head>

<body>
<h3>Array메소드</h3>
<div class="box">
	fr = ["사과", "바나나", "참외","사과","복숭아","사과","파인애플"]<br>
	
	indexOf(item,start) : 첫번째 item을 찾는다.<br>
	lastIndexOf(item,start): 마지막 item을 찾는다.<br>
	start매개변수는 생략 가능, 찾을 시작 위치를 지정한다.
	
	<br>
	<button type="button" onclick="proc1()">indexOf</button>
	<button type="button" onclick="proc2()">lastIndexOf</button>
	<button type="button" onclick="proc3()">indexOf_start</button>
	<div id="result1"></div>
	<div id="result2"></div>
	<div id="result3"></div>
</div>
</body>
</html>

push, pop, slice, splice, concat, join 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">

<script type="text/javascript">
fr = ["사과", "바나나", "참외","사과","복숭아","사과","파인애플"];

function proc1(){
	str = "원래 배열: "+fr+"<br>";
	
	while(true){
		
		frname = prompt("추가할요소를 입력하세요");
		fr.push(frname);
		
		cont = confirm("계속할래?");
		if(!cont){
			break;
		}else{
			continue;
		}
		
	}
	
	str += "추가한 배열: "+ fr +"<br>";
	
	document.querySelector('#result1').innerHTML= str;
}

function proc2(){
	str = "원래 배열: "+fr+"<br>";
	
	del = fr.pop();
	
	str +="제거된 요소: "+del+"<br>";
	str += "제거후 배열: "+ fr +"<br>";
	
	document.querySelector('#result2').innerHTML= str;
	
}

function proc3(){
/* 	start = 1;
	end = 5;
	frsli = fr.slice(start, end);
	str = "원래 배열: "+fr+"<br>";
	str +="추출된 배열: "+frsli+"<br>";
	
	str += "추출후 배열: "+ fr +"<br>"; */
	
	// 사과와 사과 사이의 값을 추출한다.
	// 사과의 인덱스값을 얻는다. 0,3 

	start = fr.indexOf("사과");
	
	end = fr.indexOf("사과",start+1);
	
	frsli = fr.slice(start+1,end);
	
	str = "원래 배열: "+fr+"<br>";
	str +="추출된 배열: "+frsli+"<br>";
	
	document.querySelector('#result3').innerHTML= str;
}

function proc4(){
	
	fr.splice(2, 1); // 2번째 위치에서 한개를 삭제
	fr.splice(3, 2, "새콤달콤", "비틀즈", "마이쮸"); // 세번째 위치에서 두개를 삭제하고 세번째 위치에 세개를 추가한다.
	fr.splice(3,0,"망고","포도"); // 3번째 위치에 망고 포도를 삽입한다.
	
}

function proc5(){
	su = [123,456,789,987,654,321]
	frsu = fr.concat(su);
	
	str = "fr : "+fr+"<br>";
	str +="su: "+su+"<br>";
	str +="frsu: "+frsu+"<br>";
	
	document.querySelector('#result5').innerHTML= str;
}

function proc6(){
	frst = fr.join();
	
	str = "fr길이: "+fr.length+"<br>";
	for(i=0; i<fr.length; i++){
		str += fr[i]+"<br>";
	}
	
	str += "frst길이: "+frst.length+"<br>";
	for(i=0; i<frst.length; i++){
		str += frst[i]+"<br>";
	}
	document.querySelector('#result6').innerHTML= str;
	
}
</script>

</head>
<body>

<div class="box">
	배열요소 추가삭제<br>
	push(a,b,c...) : 배열 끝에 요소를 추가한다.<br>
	pop(): 배열의 마지막 요소를 제거한다. 제거한 데이터를 리턴한다.<br>
	<br>
	<button type="button" onclick="proc1()">push</button>
	<button type="button" onclick="proc2()">pop</button>
	<div id="result1"></div>
	<div id="result2"></div>
</div>

<div class="box">
	배열요소 추출하기<br>
	slice(start, end) : start~end 사이의 요소를 추출하여 배열로 만든다.. end위치의 값은 추출되지 않는다.<br>

	<br>
	<button type="button" onclick="proc3()">slice</button>
	<div id="result3"></div>
	
</div>

<div class="box">
	배열요소 수정하기<br>
	splice(index, n) : index위치에서 n개를 삭제한다.<br>
	splice(index, n, a, b, c) index위치에서 n개를 삭제하고 a, b, c를 삽입한다.
	n=0: 삭제하지 않고 삽입한다.
	<br>
	<button type="button" onclick="proc4()">splice</button>
	<div id="result4"></div>
	
</div>

<div class="box">
	<br>
	a.concat(b) : a배열과 b배열을 하나로 합친다.<br>
	join():배열을 문자열로 변환한다. <br>
	
	<br>
	<button type="button" onclick="proc5()">concat</button>
	<button type="button" onclick="proc6()">join</button>
	<div id="result5"></div>
	<div id="result6"></div>
	
</div>

</body>
</html>

array 예제

  • 사람 이름을 계속 입력 받아 배열에 저장하고 그 저장된 이름을 출력하는 프로그램을 작성하시오.
    (단, 입력은 prompt 명령을 이용하고, 입력의 마지막은 공백문자를 입력하거나 "취소" 버튼을 눌렀을 때로 한다. "취소" 버튼은 null 이 입력될 때이다.)
  • 일단 아무 수나 입력받는다. 입력시 수는 중복될 수도 있다.
    서로 중복되지 않은 정수 5개를 입력 받아 배열에 저장후, 출력하는 프로그램을 작성하시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
function proc1(){
	
	names = new Array(); //배열 선언
	while(true){
		// 입력
		input = prompt("입력하세요.");
		
		// 비교. 입력없이 확인/취소
		if(input==null || input.trim().length <1){
			break;
		}
		
		names.push(input)
		// 배열에 저장한다.
	}
	
	str = "names: "+ names+"<br>";
	document.getElementById('result1').innerHTML = str;
}

function proc2(){
	names = new Array(); //배열 선언
	
	str ="";
	
	while(true){
		// 입력
		input = prompt("수를 입력하세요.");
		str += input + " ";
		// 비교. 입력없이 확인/취소
		if(input==null || input.trim().length <1){
			break;
		}
		
		// 배열에 저장한다.
		
		if(names.indexOf(input)==-1){
		names.push(input);
		}
		
		if(names.length==5){
			break;
		}
		
	}
	
	str += "<br>names: "+ names+"<br>";
	document.getElementById('result2').innerHTML = str;
}
</script>
</head>
<body>

<div class="box">
	사람 이름을 계속 입력 받아 배열에 저장하고 그 저장된 이름을 출력하는 
        프로그램을 작성하시오.
	(단, 입력은 prompt 명령을 이용하고, 입력의 마지막은 공백문자를 입력하거나 
        "취소" 버튼을 눌렀을 때로 한다. "취소" 버튼은 null 이 입력될 때이다.)

	<br>
	<button type="button" onclick="proc1()">확인</button>
	<div id="result1">
	</div>
</div>

<div class="box">
	일단 아무 수나 입력받는다. 입력시 수는 중복될 수도 있다.<br>
	서로 중복되지 않은 정수 5개를 입력 받아  배열에 저장 후, 
        출력하는 프로그램을 작성하시오. 

	<br>
	<button type="button" onclick="proc2()">확인</button>
	<div id="result2">
	</div>
</div>

</body>
</html>
profile
삐약..뺙뺙

0개의 댓글