메뉴 건너뛰기

2019.01.16 18:19

배열과 Array객체

조회 수 1053 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

[배열]

 

형식: 배열명 = new Array (인덱스번호)  or  배열명 = new Array (초기값1, 초기값2, ... )

 

인덱스번호는 배열에 넣을 값의 최대길이를 설정하고, 생략하면 배열은 최대길이 만큼 자동으로 설정 됩니다. 배열은 선언하지 않으면 사용하지 못하지만, 변수는 선언하지 않아도 사용할 수 있습니다.

그러나 변수도 다음과 같이 선언하고 나서 사용하는 것이 안전합니다.

 

var i;
for ( i=0; i<10; i++)

JavaScript에는 변수, 배열은 Data형이 없이 수치 혹은 문자열을 사용할 수 있습니다.

 

예제1>

 

<html>
<head>
</head>
<body>
<script language="javascript">
<!--
my_info = new Array(3)   // 3개의 값을 저장할 수 있는 배열을 선언
my_info[0] = "컴대모"     // 배열에 값을 설정
my_info[1] = 2000
my_info[2] = 1004
for(var i = 0; i <= 2; i++)       
document.write("<h3>" + "[" + i + "]" + my_info[i] + "<br>" + "</h3>")

my_info2 = new Array("컴대모", 2000, 1004)  // 배열의 선언과 동시에 초기값을 설정
for(var j = 0; j < my_info.length; j++)            // 배열의 길이를 나타내는 length를 이용하여 for문의 조건을 설정
   document.write("<h3>" + "[" + j + "]" + my_info[j] + "<br>" + "</h3>")
//-->
</script>
</body>
</html>
 

예제2>

 

<html>

<head><title>배열예제</title>

<script language="JavaScript">

function MakeArray(n){  //JavaScript의 배열의 선언은 함수와 new연산자를 사용해서 만든다

this.length=n;

}

</script>

</head>

<body>

<pre>

<script language="JavaScript">

var col= new MakeArray(6);

col[1]="0000ff";

col[2]="00ff00";

col[3]="00ffff";

col[4]="ff0000";

col[5]="ff00ff";

col[6]="ffff00";

for(i=1;i<=6;i++){

document.write("<font color=#" + col[i] + ">");

document.write("컴퓨터에 대한 모든것<br>");

document.write("</font>");

}

</script>

<!--위의 예는 col[0]~col[6]의 7개의 배열을 만든다. 배열의 기초요소에는 makeArray함수의 this.lengt=n;에 의한 배열의 갯수가 결정되기 때문에 User는 그 기초요소를 사용하지않도록 col[1] ~col[6]을 사용한다. 위에서 this는 현재 object의 참조를 나타낸다. 즉 위의 예에서 this는 MakeArray object를 나타낸다. 참고로 JavaScript는 1차원 배열 밖에 없다

//-->

</pre>

</body>

</html>
 

[Array 객체의 메소드]

 

2-1. join()

배열을 하나의 문자열로 출력합니다. join(구분자) 라고 지정하면 요소를 구분할 때 괄호안의 문자열이 더해지고 구분자를 생략하면 콤마(,)로 각 요소를 구분하고 출력합니다.

 

예제1>

 

<html>
<head>
</head>
<body>
<script language="javascript">
<!--
my_info = new Array("컴대모", "커뮤니티")  // 배열을 선언하고 초기값을 설정
document.write("<h3>")
document.write(my_info.join(" "))   // 배열을 출력, join()을 사용하여 공백으로 구분하여 두 문자열을 출력
document.write("</h3>")
//-->
</script>
</body>
</html>

2-2. reverse()

배열의 요소를 반대로 나열하며, 매개변수는 없습니다.

 

예제2>

 

<html>
<head>
</head>
<body>
<script language="javascript">
<!--
my_info = new Array("커뮤니티", "컴대모")   // 배열을 선언하고 초기값을 설정
document.write("<h3>")
document.write(my_info.reverse())   // reverse()를 사용하여 배열의 값을 거꾸로 출력
document.write("</h3>")
//-->
</script>
</body>
</html>
 

2-3. slice()

배열의 일부를 선택하여 부분적인 새로운 배열을 만들기 위해 사용합니다.

 

예제>

 

<html>
<head>
</head>
<body>
<script language="javascript">
<!--
my_info = new Array("컴대모", 2000, 1004)   // 배열을 선언하고 초기값을 설정
my_info2 = my_info.slice(0, 1)                   

// slice()를 사용하여 부분을 새로운 배열로 생성,

// ()의 숫자는 배열 인덱스를 나타내며 끝자리는 새로운 배열에 포함되지 않음
document.write("<h3>" + my_info2 + "</h3>")
//-->
</script>
</body>
</html>
 

2-4. concat()

두 개의 배열을 결합해서 하나의 배열로 만듭니다.

 

예제>

 

<html>
<head>
</head>
<body>
<script language="javascript">
<!--
my_info = new Array("컴대모", 2000,1004)    // 배열을 생성하고 초기값을 설정
my_info2 = new Array("컴퓨터에 대한 모든것™", "커뮤니티")   // 배열을 생성하고 초기값을 설정
my_info3 = my_info.concat(my_info2)    // concat()을 사용해서 my_info에 my_info2를 결합
document.write("<h3>" + my_info3 + "</h3>")
//-->
</script>
</body>
</html>
 

2-5. sort()

배열안에 있는 값을 정렬할 때 사용하며, 매개변수를 생략하면 오름차순으로 정렬됩니다.

 

예제>

 

<html>
<head>
</head>
<body>
<script language="javascript">
<!--
baseball = new Array("현대유니콘스", "두산베어스", "삼성라이온스")
player = new Array("박재홍", "김동주", "이승엽")
document.write(baseball.sort() + "<br>")
document.write(player.sort())
//-->
</script>
</body>
</html>


List of Articles
번호 제목 날짜 조회 수
227 Alert, Confirm을 모달 팝업으로 만들기 file 2021.03.09 3899
226 arguments object 2016.09.21 5652
225 check box 선택시 색상 변경 file 2014.03.01 6494
224 Checkbox : 체크박스 체크여부 확인 file 2015.06.19 19010
223 CheckBox 전체 선택 & 해제 2015.04.28 5587
222 checkbox 한개 클릭으로 다른모든 checkbox 클릭되게 하기 2014.03.01 5709
221 check_inputbox.js 2014.03.01 5407
220 cross site scripting을 막기위한...javascript 2018.07.24 1596
219 Date 객체로 원하는 날짜, 시간 표현하기 2021.08.20 223
218 default 매개변수(매개변수 기본값) 2021.03.26 199
217 div 높이 가운데정렬 2014.03.01 5594
216 div태그를 이용한 클릭시 레이어 띄우기 2019.01.16 1330
215 DTREE 트리구조 만들기 file 2021.03.26 877
214 fckeditor 2.6.6 엄청 편해졌네 file 2014.03.01 5403
213 form 값 iframe 으로 넘기기 2014.03.01 6872
212 getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제 2021.03.26 197
211 GET방식으로 전송시 특수문자함께 전송하는 방법 2016.12.22 12350
210 htaccess 자동으로 만들어주는 사이트 2016.09.11 5423
209 HTML 화면을 PDF로 출력 file 2019.01.08 5225
208 HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) file 2021.03.09 718
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved