메뉴 건너뛰기

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>


  1. 반복문 사용할때 태그 식별하기 data-item

    Date2018.07.04 Views1849
    Read More
  2. 배너 램덤으로 부여주기

    Date2014.03.01 Views5911
    Read More
  3. 배열과 Array객체

    Date2019.01.16 Views1051
    Read More
  4. 배열의 리터럴 선언, 또다른 배열 선언 방법!

    Date2015.02.03 Views6408
    Read More
  5. 버튼 삭제

    Date2015.02.03 Views5951
    Read More
  6. 복사방지+드래그금지+마우스우클릭 금지

    Date2016.12.22 Views7912
    Read More
  7. 부드럽게 페이지 이동하기

    Date2016.09.11 Views6003
    Read More
  8. 브라우저별 이미지 크기 변경

    Date2016.11.17 Views7928
    Read More
  9. 비동기 작업의 원리 (JavaScript 엔진, Web API, Task Queue, Event Loop)

    Date2023.01.20 Views138
    Read More
  10. 새로고침(F5) 금지

    Date2018.03.28 Views6001
    Read More
  11. 새창을 띠워서 focus주기

    Date2014.03.01 Views5715
    Read More
  12. 샘플) top left menu

    Date2014.03.01 Views5513
    Read More
  13. 선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row

    Date2015.04.28 Views13541
    Read More
  14. 선택된 select 의 option 값을 다른 select로 넘겨주기

    Date2014.03.01 Views5668
    Read More
  15. 선택된 데이터 부모창에 넘기기 (iframe ☞ 부모창)

    Date2015.04.28 Views6614
    Read More
  16. 셀렉트(select) change Ajax 이벤트

    Date2016.12.23 Views12589
    Read More
  17. 셀렉트(select) change href 이벤트

    Date2016.12.23 Views5899
    Read More
  18. 셀렉트(select) change 이벤트 (split)

    Date2016.12.23 Views6009
    Read More
  19. 스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징)

    Date2018.07.04 Views2715
    Read More
  20. 스마트에디터(SmartEditor)에서 textarea 유효성 체크하기

    Date2018.07.04 Views3991
    Read More
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved