웹모아
웹모아[손님] 검색 로그인   
웹모아
 
자바스크립트예제
 


Cookbook 배열공부
  2010-01-24 23:23:50 댓글:(0)   조회:3103


액션스크립트에는 두 종류의 배열이 있다.
정수 색인 배열( Interger-indexed array ) 과 연관배열 ( associative array )

정수 색인 배열 : 배열의 각각의 원소에 접근하기 위해 정수를 사용한다.
이러한 배열은 0 부터 시작한다. 각각의 원소는 번호가 매겨진 슬롯을 차지하고 있다.

말이 너무 어렵기 떄문에...역시나 그림으로 그려본다...
사용자 삽입 이미지




연관 배열 : 각각의 값에 접근하기 위해 문자열을 이용한다... 어려워서 pass!


배열을 만들려면, 아래 예제중 편하게 만들면 된다.

var arr:Array = new Array();
var arr:Array = ["a", "b" ,"c" ];
var arr:Array = new Array( "a", "b", "c" );

*"a","b","c" 는 elements(원소) 이다.

배열 안에는 어떠한 값이 있는지 상관하지 않는다.
즉, 문자열, 숫자, Boolean 등을 저장 할수 있다.

var data:Array = ["a", 2, true3, new Object() ];

그리고 다른 언어들과 다르게, 액션스크립트는 배열 선언시 몇개의 원소가 들어갈지 선언할 필요가 없다.
즉,  C에서처럼 배열크기를 셋팅해줄 필요가 없다는거다.

정수형 자료 10개를 사용하기 위해 배열 arr를 선언
int arr[10] ;


1) 배열의 처음이나 끝에 원소를 추가 하는 방법

push(), unshift() 를 사용한다.

var camera:Array = [ "Nikon", "Canon", "Olympus" ];
camera.push( "Samsung" );    //Samsung 뒤로 넣기.
trace ( camera );    //출력 Nikon, Canon, Olympus, Samsung

var camera:Array = [ "Nikon", "Canon", "Olympus" ];
camera.unshift( "Samsung"); //이번엔 Samsung을 앞으로 넣기
trace ( camera);    //출력 Samsung, Nikon, Canon, Olympus


2) 배열의 순환

length와 for순환문을 이용한다.

var camera:Array = [ "Nikon", "Canon", "Olympus", "Samsung" ];
for ( var i:int=0; i<camera.length; i++)
{
    trace ( camera [i] );   
}
//출력 Nikon
Canon
Olympus
Samsung

i 만 입력하면 원소의 갯수값이 나온다.
var camera:Array = [ "Nikon", "Canon", "Olympus", "Samsung" ];
for ( var i:int=0; i<camera.length; i++)
{
    trace ( i );   
}
//출력 0
1
2
3

이번엔 거꾸로 검색해보자.
for문의 초기값은 camera의 길이..length값으로 넣구...돌리면 되겠다..

var camera:Array = [ "Nikon", "Canon", "Olympus", "Samsung" ];
for ( var i:int=camera.length; i>=0; i--)
{
    trace ( camera[i] );
}
//출력undefined
Samsung
Olympus
Canon
Nikon

어라 출력에 undefined가 떳다.  *undefined :  정의되지 않음 이란 뜻
아차~ 배열의 인덱스는 0부터 시작하니까 length의 속성보다 하나 작으면 되는거였다.
마지막 인덱스는 언제나 length보다 하나 작다는 것을 기억해두자...length-1  length-1  length-1

이렇게 수정해주면 잘 출력된다.
var camera:Array = [ "Nikon", "Canon", "Olympus", "Samsung" ];
for ( var i:int=camera.length-1; i>=0; i--)
{
    trace ( camera[i] );
}

하지만 좀더 유연한 성능 향상을 위해 배열의 length값을 담아두는 변수하나 만들어준다.

var camera:Array = [ "Nikon", "Canon", "Olympus", "Samsung" ];
var len:int = camera.length;
for ( var i:int=len-1; i>=0; i--)
{
    trace ( camera[i] );
}
//출력Samsung
Olympus
Canon
Nikon


3) 배열 안에서 원소 찾기

앞에 처럼 어떠한 값에 대응하는 원소를 찾기 위해서는 for문을 이용해야 한다.
원소를 찾은 후 break문을 이용하여 for문을 빠져 나온다.
여기서 break를 사용하는 두가지 이유는
첫째 원소를 찾은 후 남은 배열을 탐색할 필요가 없기 때문에,
둘쨰 불필요한 명령을 실행할 필요가 없기 때문이다.

var num:Array = [ "똘배", "철수", "영희", "선미" ];    //배열을 만든다.
var str:String = "똘배";    //찾고 싶은 이름 선언.
for( var i:int=0; i<num.length; i++)
{
    if( num[i] == str )    //name안에 똘배가 있다면..
    {
        trace ( i );    //똘배의 위치 출력
        break;    //검색 그만
    }
}
//출력 0... 똘배는 0번째에 있다.


4) 원소를 삭제하기

splice(), pop(), shift() 를 이용한다.

var num:Array = [ "똘배", "철수", "영희", "선미" ];
//철수와 영희를 지워보자.
num.splice( 1, 2 );
trace ( num )
//출력 똘배,선미

splice의 사용법
splice ( 시작할 인덱스, 지울 원소 갯수, 추가할 원소)

선미 뒤에 태민 을 추가 해보자.

num.splice ( 2, 0, "태민");  //0을 입력하면 원소가 삭제되지 않는다.
trace ( num );
//출력 똘배,선미,태민

pop을 이용해서 마지막 원소를 삭제,
shift를 이용해서 첫번쨰 원소를 삭제 할수 있다.

var num:Array = [ "철수", "똘배", "선미", "영수"];
num.pop();    //영수를 삭제한다.
trace ( num );
//출력 철수, 똘배, 선미

num.shift();    //철수를 삭제한다.
trace ( num );
//출력 똘배, 선미


for문 안에서 배열의 원소를 삭제할 때에는 그에 따라 순환문의 인덱스값도 변경해줘야 한다.

var number :Array = [ 2, 3 ];    //0번째 원소2, 1번째 원소3
number[4] = 6;    //4번째 원소에 6을 대입
trace ( number );
//출력 2,3,,,6

해결 하려면,
var number :Array = [ 2, 3 ];    //0번째 원소2, 1번째 원소3
number[4] = 6;    //4번째 원소에 6을 대입
for ( var i:int=0; i<number.length; i++)
{
    if( number[i] == undefined )    //값이 undefined일때...
    {
        number.splice( i, 1);    //i에서 하나만 삭제하라.
        i--;    //i는 점점 감소
    }
}
trace ( number );
//출력 2,3,6


5) 문자열을 배열로 반환하는 방법

split()을 이용한다.
단, 문자열 목록은 구분할 수 있는 특정한 문자로 구분되어야 한다.

var str:String = "똘배와 영회와 철수";
var arr:Array = str.split("와");    //"와" 를 구분으로 배열로 나뉘어 보자.
trace ( arr );
//출력 똘배, 영희, 철수


6) 배열을 문자열로 반환하는 방법

join()을 이용한다.
단, 구분자를 지정하지 않으면 콤마( , ) 가 기본적으로 설정된다.

var num:Array = [ 1, 2, 3, 4 ];
num.join();
trace ( num );
//출력 1,2,3,4


7) 배열을 복사하는 방법

배열은 조합 데이터 타입이기 때문에 원본 배열의 값을 변화 시키면 새롭게 복사된 배열값도 변화를 준다.
이때, concat()을 사용하는데,
하지만 AS3가 개선되고 부터는 복제를 할때 자동으로 concat()을 사용한 것 처럼 최상위 배열의 값이 복제가 된다.

var num:Array = [ "a", "b", "c" ];

var num2:Array = num.concat();     //자동으로 concat() 적용됨.

trace ( num );
trace ( num2 );    //num과 num2는 동일하다.

num = [ "d", "e", "f" ];

trace ( num );
trace ( num2 );


8) 다차원 배열

var canon:Array = [];
canon[0] = ["400d", "50만원"];
canon[1] = ["40d", "100만원"];
canon[2] = ["5d", "200만원"];    // 3*2 행열을 가진 이중 배열을 만든다.

//5d 가격을 알고싶다
trace ( canon[2][1]);    //출력 200만원

사용자 삽입 이미지





//for문으로 전체 출력 해보자.
for ( var i:int=0; i<canon.length; i++)
{
    trace ( canon[i][0] +"  " + canon[i][1] );
}//출력 400d  50만원
40d  100만원
5d  200만원


혼란을 막기위해서 객체 데이터안에 속성의 이름을 저장하여 접근해보자.
이것이 연관배열이다.

var canon:Array = [];

canon[0] = {product:"400d", price:"50만원"};
canon[1] = {product:"40d", price:"100만원"};
canon[2] = {product:"5d", price:"200만원"};    // 3*2 행열을 가진 이중 연관 배열을 만든다.

for ( var i:int=0; i<canon.length; i++)
{
    trace ( canon[i].product + " " + canon[i].price );
}
//출력 400d 50만원
40d 100만원
5d 200만원

연관배열은 [ ] 아니라, { } 을 사용해야 한다.


9) 배열의 정열

sort()를 이용한다.

var num:Array = [ 10, 3, 4, 19, 28 ];
num.sort( Array.NUMERIC );    //Array 의 매서드를 이용하여 오름차순으로 정렬한다.
trace ( num );
//출력 3,4,10,19,28

reverse()를 이용하여 다시 반대로 정렬한다.

num.reverse();
trace ( num);
//출력 28,19,10,4,3

sortOn()을 이용하여 연관배열을 정렬시켜보자.

var canon:Array = [];
canon[0] = {product:"400d", price:"500"};
canon[1] = {product:"40d", price:"100"};
canon[2] = {product:"5d", price:"200"};    // 3*2 행열을 가진 이중 연관 배열을 만든다.

canon.sortOn("price");    // 오름차순으로 정렬시킨다.

for ( var i:int=0; i<canon.length; i++)
{
    trace ( canon[i].product + " " + canon[i].price );
}

//결과 40d 100
5d 200
400d 500


10) 무작위로 배열 섞기.

아래와 같은 매서드를 만든다.

function randomArray(elements1:Object ,elements2:Object):Number {
 return Math.random()+ .5;   //0.0 부터 1.0까지의 수를 반환한다.
}

var num:Array = [3, 4, 5, 60, 20];    //배열을 만들고
num.sort( randomArray );    //sort 안에 사용자 정의 정렬 매서드를 넣는다.
for ( var i:int=0; i<num.length; i++)
{
    trace ( num[i] );
}
//결과 렌덤하게 3, 4, 5, 60, 20을 뿌림.


11) 최소값, 최대값 찾기

sort를 이용한다.

var num:Array = [ 2, 4, 10, 32, 12];
num.sort ( Array.NUMERIC );    //오름차순 정렬
trace ( num[0] );     //0번째 원소 출력... 최소값
trace ( num[num.length -1 ] );     //마지막 원소 출력...최대값


12) import ascb.util.ArrayUtilities 이용하기


일단 다운 받아서 클래스 패스 추가시킨다.



출처:http://cafe.naver.com/amfphpsamo.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=64

3.0에서는 위처럼 단 한줄로 끝난다. 그것도 어도비사가 구현한 최적 알고리즘으로 구해지기 때문에

불안정할 이유도 없다.  

문법은 아래와같다.

findMatchIndex( 찾고자하는 대장 배열, 찾고자하는 값);

리턴값으로는 해당 배열의 인덱스 값이다.


다음예제를 본다.

var letters:Array = ["a", "b", "c", "d","a", "b", "c", "d"];

위처름 같은 요소가 여러번 반복될수있다. 이런경우에 어떤 결과가 나올까

만약 "a"을 찾고자 한다면 인적스 0번에 해당하는값이 있으므로 0이 리턴될것이다.

리턴이라는것은 종료이므로 더이상 찾지 않는다는 의미이므로 만약 인덱스 4에 있는 "a"를 찾고자 한다면

다른 방법을 찾아야할것이다.

이럴때 3번째 인자가 쓰인다.


findMatchIndex( 찾고자하는 대장 배열, 찾고자하는 값 , 찾기 시작하고자 하는 인덱스 값);

결국

trace(ArrayUtilities.findMatchIndex(letters, "a", 1));또는
trace(ArrayUtilities.findMatchIndex(letters, "a", 2)); 또는

.

.

trace(ArrayUtilities.findMatchIndex(letters, "a", 3));

까지는 첫번째 인덱스인 0 을 건너뛰고 비교하기때문에 두번째 "a"의 인덱스 값을 반환하게될것이다.

하지만 이경우는 위치를 알고있어야하는 경우에 유용할것 이다.


다음 예제>

만약 배열에 들어있는 값중에 특정 글자가 들어있는 인덱스를 얻고자 한다면

var words:Array = ["bicycle", "baseball", "mat", "board"];
trace(ArrayUtilities.findMatchIndex(words, "s", true));

이렇게 해야한다. 결과값은 "s"가 들어있는 인덱스 값인 1 일 반환된다.


관찰력이 좋으신분은 여기서 세번째 인자값을 주목하고 따질수도 있다.

세번째 인자값은 아까 찾기 시작하고자 하는 인덱스 값이라고 했는데 왜 갑자기 불린으로 집어넣는지 의아할것이다.

자기 마음데로 자료형을 바꿔서 넣게하는 점이 헤깔리지 않을 까..

아마 이부분은 findMatchIndex 의 기본성격을 감안했을때 희생해야하는 부분일것으로 보인다.

불린값으로 true를 넣었을경우 해당 배열값 안에서 모든 단어를 비교하게된다.


만약 배열의 끝에서부터 검사하고싶다면 findLastMatchIndex 를  대신쓰면 된다.

 

-----------findMatchIndices-----------

findLastMatchIndex 는 하나의 인덱스 값을 추출할때 쓴다고 위에서 예를 들었다.

하지만 하나가 아닌 들어있는 요소에서 해당하는 값과 일치하는 모든 인덱스를 추출하려고한다면

findMatchIndices 를 써야한다.

var letters:Array = ["a", "b", "c", "d", "a", "b", "c", "d"];

trace(ArrayUtilities.findMatchIndices(letters, "b"));
// Displays: 1,5

 

findLastMatchIndex 의 예처럼 만약 들어있는 단어 위주의 검색일경우 세번째 인자값으로 true를 넣어주면된다.

var words:Array = ["bicycle", "baseball", "mat", "board"];

trace(ArrayUtilities.findMatchIndices(words, "b", true));
// Displays: 0,1,3





 댓글 (0)


자바스크립트예제
페이지: 1 / 10   

 

  클립보드 복사하기,붙여놓기
클립보드 복사하기,붙여놓기 자바스크립트로 ctrl+c, ctrl+v 기능 구현 function copy(){ var memo = $("#test").val(); window.clipboardData.setData("Text",memo); //클립보드 복사 } function paste(){ var memo조회(1262)          




  사용자가 submit을 여러번 못하게 방지하기
사용자가 submit을 여러번 못하게 방지하기 onsubmit="this.submit.disabled=true"조회(1482)          




  자바스크립트로 한글 , 초성 중성 종성 분리 (음소
자바스크립트로 한글 , 초성 중성 종성 분리 (음소분리) font_cho = Array( 'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', '조회(1800)          




  Cookbook 배열공부
액션스크립트에는 두 종류의 배열이 있다.정수 색인 배열( Interger-indexed array ) 과 연관배열 ( associative array )정수 색인 배열 : 배열의 각각의 원소에 접근하기 위해 정수를 사용한다.이러한 배열은 0 부터 시작한다. 각각의 원소는 번호가 매겨진 슬롯을 차지하고 있다.말이 너무 어렵기 떄문에...역시나 그조회(3104)          




  한글을 초,중,종성으로 자르기 함수
/*======================================== js_han_split.js 한글 초성,중성,종성 자르기 사용법 arr = js_han_split_char_diff('&#48579;'); arr -> Array('ㅂ','ㅞ','ㄼ');댓글 (1)     조회(2552)          




  메뉴 스크립트
document.write(' a.Style2 {color:#333333;text-decoration:none;} a:hover.Style2 {color:red;text-decoration:underlined;} '); move_color_menu = new Array(); move_color_lien = new Arra조회(1653)          






    [RE] 메뉴 스크립트
메뉴 1 메뉴 2 메뉴1-1 메뉴1-2 메뉴1-3 메뉴2-1 메뉴2-2 메뉴2-3 조회(1593)          




      [RE] 메뉴 스크립트 - 가로메뉴
//메뉴의 상태를 알수 있게 해주는 전역변수. var menu1Flage = "none"; var menu2Flage = "none"; var menu3Flage = "none"; var menu4Flage = "none"; function viewSub(fname){ 조회(2173)          




        [RE] 레이어를 이용한 메뉴 스크립트
레이어를 이용한 메뉴 스크립트 a { color:#0000ff; font-size:9pt; text-decoration:underline; } a:link { color:#000000; font-size:9pt; text-decoration:underline; } a:visited { color:#000066; font-si조회(1710)          




          [RE] 레이어를 이용한 메뉴 스크립트 2
레이어를 이용한 메뉴 스크립트 a { color:#0000ff; font-size:9pt; text-decoration:underline; } a:link { color:#000000; font-size:9pt; text-decoration:underline; } a:visited { color:#000066; font-si조회(1551)          




≪ [1]  [2]  [3]  [4]  [5]  

복수단어 검색은 공백(space)로 구분해 주세요.



 
최근 글
[손님]
32
43
210
353
585
337
379
216
331
3609
897
927
1150
941
4236
 
인기 글
[손님]
3431
3551
4126
3199
3398
3283
3059
7866
3104
3854
6483
5363
3645
  [랜드모아] 영문과 숫자만 사용
3099
3189