배열(Array)

728x90

배열(Array)

1. 배열(Array)

여러개의 변수를 동일한 이름으로 제어하려고 할때 사용하는 데이터 저장 유형임.

가. 배열의 특징

① 배열의 개수는 가변적이다.

② 배열의 첨자는 0부터 시작된다.

③ n은 반드시 정수 이여야 한다.

④ 배열의 개수는 반드시 지정될 필요는 없다.

⑤ 배열의 길이(갯수)알아내는 메소드 : 배열명.length

⑥ 출력할 때 배열의 첨자를 쓰지 않고 배열명만 쓰면 배열에 저장된 모든 내용을 한번에 출력할 수 있다.

나. 배열 선언하기

//생성하기
배열명 = new Array(n)
배열명 = new Array('요소1' , '요소2' , ...);

// 배열값을 일반변수에 대입하기
r=배열명[n]

// 2차원 배열 선언
배열명[n] = new Array(n);

다. 관련 Method

Method	설명
c = array1.concat(array2) array1 과 array2를 붙여 배열 c를 만든다.	a=new Array("a","b","c") ; b=new Array("d","e","f") c=a.concat(b) document.write(c) --> a,b,c,d,e,f
array.join(구분문자) 배열 array의 구분자를 구분문자로 바꿈	a=new Array(1,2,3) document.write(a) --> 1,2,3 document.write(a.join("-")) -> 1-2-3
array.reverse() 배열의 순서를 거꾸로 다시 배열함	a=new Array(1,2,3) document.write(a) --> 1,2,3 document.write(a.reverse()) --> 3,2,1
array.sort([함수]) 함수에 따라 배열의 순서를 바꿈 함수를 부를때는 함수명만 기입하고 함수는 두 개의 인수를 적어준다. return -1 : swap하지 말 것. return 1 : swap 할 것. return 0 : swap 하지 말것.	function chk(a,b){ if(a>b) {return 1} if(a<b) {return -1} if(a==b){return 0} } a = new Array(234,5,234,1,341,23,5,2346,5) document.write( a.sort(chk) ) --> 1,5,5,5,23,234,234,341,2346

2. 기본예 1

가. concat

산과 강을 배열에 입력한후 두 배열을 합쳐 하나의 배열로 만들어 출력해 보자.

WebContent/array/concat_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Concat Test</title>
</head>
<body>
<h1>Concat Test</h1>
<script type="text/javascript">
var mountain = new Array("백두산","금강산","설악산","한라산");
var river = new Array("두만강","낙동강","한강","섬진강");
var all = mountain.concat(river);

document.write("산 : " + mountain + "<p/>");
document.write("강 : " + river + "<p/>");
document.write("산 과 강 : " + all + "<p/>");

</script>
</body>
</html>

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock>

나. join

배열의 출력값을 각각 “->”, “*” 기호를 사용하여 join해 보자.

WebContent/array/join_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Join Test</title>
</head>
<body>
<h1>Join Test</h1>
<script type="text/javascript">
var mountain = new Array("백두산","금강산","설악산","한라산");
var river = new Array("두만강","낙동강","한강","섬진강");
var all = mountain.concat(river);

document.write("산 : " + mountain.join("->") + "<p/>");
document.write("강 : " + river.join("*") + "<p/>");
document.write("산 과 강 : " + all.join("<-->") + "<p/>");

</script>
</body>
</html>

다. reverse

배열을 뒤집어 출력해 보자.

WebContent/array/reverse_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Reverse Test</title>
</head>
<body>
<h1>Reverse Test</h1>
<script type="text/javascript">
var mountain = new Array("백두산","금강산","설악산","한라산");
var river = new Array("두만강","낙동강","한강","섬진강");
var all = mountain.concat(river);

document.write("산 : " + mountain + "<p/>");
document.write("산(reverse) : " + mountain.reverse() + "<p/>");

document.write("강 : " + river + "<p/>");
document.write("강 (reverse): " + river.reverse() + "<p/>");

document.write("산 과 강 : " + all+ "<p/>");
document.write("산 과 강 (reverse): " + all.reverse() + "<p/>");

</script>
</body>
</html>

라. sort

WebContent/array/sort_test.html

<HTML>
<HEAD>
<TITLE>배열 정렬하기</TITLE>
<script>
num = new Array(44,235,3246,2346,236,2457,347);
str = new Array("홍길동","일지매","이순신","문근영","최지수");

// 정렬 패턴 정의
function Ascending(a,b)
{
if(a>b) return 1;
if(a<b) return -1;
if(a==b) return 0;
}

function Descending(a,b)
{
if(a>b) return -1;
if(a<b) return 1;
if(a==b) return 0;
}

function numSort(flag)
{
if(flag=="A") num.sort(Ascending) // 숫자 오름차순
else num.sort(Descending) // 숫자 내림차순
document.frm.result.value = num.join("-");
}
function strSort(flag)
{
if(flag=="A") str.sort(Ascending) // 문자 오름차순
else str.sort(Descending) // 문자 내림차순
document.frm.result.value = str.join("\n");
}
</script>
</HEAD>

<link rel="stylesheet" type="text/css" href="main.css">

<BODY>

<p class="p1">
<b>[사용설명]</b><br>
배열에 저장된 숫자형 데이터와 문자형 데이터를 버튼에 따라
오름차, 내림차 정렬하게 된다.
</p>

<center>배열 정렬 테스트<p>
<form name=frm>
<input type=button value="숫자 오름차 정렬" onclick="numSort('A')">
<input type=button value="숫자 내림차 정렬" onclick="numSort('D')">
<input type=button value="문자 오름차 정렬" onclick="strSort('A')">
<input type=button value="문자 내림차 정렬" onclick="strSort('D')">
<textarea name=result cols=45 rows=10 style="font-size:25"></textarea>
</form>
</center>

</BODY>
</HTML>

배열 복사

자바스크립트 배열은 객체형태로 처리 되기 때문에 실제로 내부에서는 눈에 보이지 않는 배열의 주소값만으로 데이터를 처리 합니다.

예를 들어 아래와 같이 하나의 배열을 만들고 두번째 다른 이름의 배열에 대입한 후 첫번째 배열을 정렬하는 소스가 있다고 합시다.

a = new Array(3,2,1);

b = a;

a.sort();

document.write(a + "<br/>" + b);

결과는 배열 a, b 모두가 오름차순 정렬되어 1,2,3이 출력된다. 즉, a와 b 모두가 같은 배열의 주소를 갖는다는 것을 알 수 있다.

첫번째 배열 복사 방법

concat()을 사용하여 배열을 쿨~하게 복사해서 서로 다른 배열의 주소값을 갖도록하여 두 개의 배열이 서로 다른처리를 할 수 있도록 해 보자.

a = new Array(3,2,1);

b = [].concat(a);

a.sort();

document.write(a + "<br/>" + b);

어떠 한가 ? 배열 a는 정렬되었어도 배열 b는 그대로...

배열 요소 추가 삭제

자바스크립의 배열은 크기가 일정하지 않다. 단점이자 장점이 될 수 있는 요소이다.

이런 배열의 특성을 살려서 배열에 데이터를 추가 하거나 삭제 할 수 있다.

push(데이터)	배열의 끝에 데이터를 추가 한다.
pop()	배열의 끝에 있는 데이터를 하나 제거 한다.
shift()	배열의 첫번째 데이터를 제거 한다.
unshift(데이터)	배열의 맨 앞에 데이터를 추가 한다.

728x90

저작자표시 비영리 변경금지

'BOOK > 자바스크립트' 카테고리의 다른 글

location 객체 (0)	2021.07.30
document 객체 (0)	2021.07.30
함수개요 (0)	2021.07.30
제어문 (0)	2021.07.30
자료의 유형과 연산자 (0)	2021.07.30

뭉치의 히스토리

배열(Array)

배열 복사

배열 요소 추가 삭제

'BOOK > 자바스크립트' 카테고리의 다른 글

댓글

티스토리툴바

티스토리툴바

배열(Array)

배열 복사

배열 요소 추가 삭제

'BOOK > 자바스크립트' 카테고리의 다른 글

관련글

댓글

티스토리툴바

티스토리툴바