메뉴 건너뛰기

2019.01.16 18:19

배열과 Array객체

조회 수 1051 추천 수 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
번호 제목 날짜 조회 수
207 [INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다 2017.02.19 8526
206 Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성 file 2015.06.19 8523
205 페이지 로드 할때 컨트롤에 포커스 주기 2015.02.03 8500
204 [단축키 설정 자바스크립트]shortcut.js 2016.12.22 8375
203 2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현 2015.04.06 8204
202 드롭다운 메뉴를 만들어보자! -1탄 file 2015.02.03 8170
201 setTimeout() / clearTimeout() / setInterval() 2016.12.22 8162
200 브라우저별 이미지 크기 변경 file 2016.11.17 7928
199 복사방지+드래그금지+마우스우클릭 금지 2016.12.22 7909
198 정규식을 이용한 실시간 콤마(comma) 넣기 2015.06.19 7876
197 [라디오버튼 오류 체크] 간단한 문제 예제 file 2015.06.19 7712
196 양력-음력 2015.02.03 7668
195 날짜 간의 일수 계산 2014.02.27 7551
194 'checkbox', 체크박스 모두체크 그리고 모두해제! file 2015.02.03 7492
193 체크박스 체크하면 레이어 보여주기. 체크안하면 알려주기 2014.03.01 7458
192 [jQuery] textarea 글자수 카운트 2014.03.01 7420
191 response.setHeader 2016.12.22 7358
190 'blur', 이미지 클릭시 테두리를 없애자! file 2015.02.03 7353
189 'opener', 부모창과 자식창의 텍스트를 교환하자! file 2015.02.03 7308
188 창에 대한 정보얻기 (창 크기, 창 위치) file 2015.06.19 7297
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved