메뉴 건너뛰기

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
번호 제목 날짜 조회 수
167 input에 background-image 이벤트 2014.03.01 5356
166 자바스크립트 변수,함수,객체의 표현 2016.12.22 5369
165 fckeditor 2.6.6 엄청 편해졌네 file 2014.03.01 5403
164 check_inputbox.js 2014.03.01 5407
163 htaccess 자동으로 만들어주는 사이트 2016.09.11 5423
162 자바스크립트, javascript, 간단한 파일 확장자 검사후 retur 2014.03.01 5434
161 이클립스 실행할때 자신이 원하는 JDK 지정하는 방법 file 2016.09.11 5439
160 적용이 간편한 [글목록 인쇄] 등 특정 영역 인쇄하기 팁 2014.02.27 5441
159 라디오 버튼 체크 2014.03.01 5451
158 input 박스에서 유용한 자바 스크립트 2014.02.27 5455
157 지정한 크기로 링크페이지 새창열기 2014.03.01 5455
156 input type checkbox 체크했는지 검사하는 소스 2014.03.01 5456
155 샘플) top left menu 2014.03.01 5513
154 이미지클릭시 옆에 큰이미지나오기 2014.03.17 5518
153 jquery 기본 엘리먼트 속성제어방법 2016.09.11 5518
152 '레이블', 반복문을 제어하자! file 2015.02.03 5540
151 input radio 체크유무 검사 2016.09.11 5562
150 CheckBox 전체 선택 & 해제 2015.04.28 5580
149 div 높이 가운데정렬 2014.03.01 5593
148 자바스크립트 이벤트 목록입니다. ( javascript event ) 2015.04.06 5596
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved