메뉴 건너뛰기

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
번호 제목 날짜 조회 수
67 'setTimeout', 타이머를 사용하자! file 2015.02.03 7033
66 특정 HTML DOM 엘레멘트로 스크롤 이동하기 2016.09.09 7075
65 접근성 윈도우 팝업 띄우기 2016.12.22 7114
64 연관배열 사용하기 2016.09.21 7134
63 이동 가능한 레이어팝업 소스 2016.09.01 7166
62 지금 보고 있는 웹페이지 창을 닫으려고 합니다." 안나타나게 하기 2014.02.27 7185
61 jquery offset()을 이용한 부드러운 스크롤 이동 2016.09.01 7277
60 창에 대한 정보얻기 (창 크기, 창 위치) file 2015.06.19 7297
59 'opener', 부모창과 자식창의 텍스트를 교환하자! file 2015.02.03 7308
58 'blur', 이미지 클릭시 테두리를 없애자! file 2015.02.03 7353
57 response.setHeader 2016.12.22 7358
56 [jQuery] textarea 글자수 카운트 2014.03.01 7420
55 체크박스 체크하면 레이어 보여주기. 체크안하면 알려주기 2014.03.01 7458
54 'checkbox', 체크박스 모두체크 그리고 모두해제! file 2015.02.03 7492
53 날짜 간의 일수 계산 2014.02.27 7551
52 양력-음력 2015.02.03 7673
51 [라디오버튼 오류 체크] 간단한 문제 예제 file 2015.06.19 7712
50 정규식을 이용한 실시간 콤마(comma) 넣기 2015.06.19 7876
49 복사방지+드래그금지+마우스우클릭 금지 2016.12.22 7912
48 브라우저별 이미지 크기 변경 file 2016.11.17 7928
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved