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>
삐약..뺙뺙