06_배열

06_배열

배열이 필요한 경우

많은 양의 데이터를 하나의 변수에 저장하여 비슷한 방법으로 처리할 경우 배열을 사용.

1차원 배열

1) 배열 변수 선언

① 배열 크기를 결정하는 배열 변수 선언

예) var myArray = new Array(10); //원하는 크기의 숫자를 괄호 안에 넣음

② 배열 크기를 동적으로 변하게 하는 배열 변수 선언

예) var myArray = new Array();

2) 배열 변수 선언과 함께 초기화

예) var myArray = [ “값1”, “값2“, “값3“, “값4“, “값5“ ] ;

// 값은 문자열인 경우 큰 따옴표(“”)를 사용하고,

// 숫자(number)나 불린(Boolean)경우는 아래와 같이 그대로 사용함

예) var myArray = [ 0,1,2,ture ] ;

3) 배열의 요소에 접근

예)myArray[0] = 100 ;

//배열 변수 이름[인덱스번호]로 배열 요소에 접근

4) 배열의 요소 개수 구하기

예) myArray.length

// 배열 변수 이름.length 변수는 배열의 크기를 저장하고 있음

2차원 배열

1) 2차원 배열 변수 선언과 함께 초기화

var myArray = [ [1,2,3], [4,5,6] ];

2) 2차원 배열 변수 선언

var myArray = new Array(new Array(3), new Array(3));

//또는

var myArray = new Array();

myArray[0] = new Array(3);

myArray[1] = new Array(3);

2) 2차원 배열 변수 사용 예

myArray[0][0] = 100;
myArray[0][1] = 200;
myArray[0][3] = 300;

for in 문

배열의 크기만큼 알아서 반복해주는 for 문장

for(var num in myArray) //myArray.length 즉, 배열 크기 만큼 자동 반복
{
// num 변수는 myArray배열의 요소를 인덱스로 사용할 수 있음
// num 변수는 0부터 자동으로 1씩 증가
}

실습예제

예제 06-1.html

배열 안의 데이터를 올림차순으로 정렬하는 자바스크립트를 작성해 보겠습니다.

.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } \n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">

<html>
<head>
    <script type="text/javascript">
        var myArray=[199,230,11,2,55,93,23,24,29,1];

        // 작은 수일수록 앞에 오도록 정렬
        for(var i=0; i<myArray.length;i++)
        {
            for(var j=i+1;j<myArray.length;j++)
            {
                if(myArray[i]> myArray[j]){
                    // myArray[i] 값이 myArray[j] 값보다 더 크면
                    // 아래와 같이 두 수를 교환함
                    var temp = myArray[i];
                    myArray[i] = myArray[j];
                    myArray[j] = temp;
                    // myArray[i]에 그 뒤 요소 값들 중 가장 작은 값이 저장됨.
                }
            }
        }

        //정렬 결과를 출력함
        for(var i=0; i<myArray.length; i++)
        {
            document.write(myArray[i]+"<br>");
        }
    </script>
</head>
</html>

예제 06-2.html

2차원 배열의 데이터를 중첩 for in 문장을 이용하여 출력하는 자바스크립트를 작성해보겠습니다.

if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":2859442,"name":"hihellloitland","title":"27","isDormancy":false,"nickName":"hihelllo","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://hihellloitland.tistory.com/37","DEFAULT_URL":"https://hihellloitland.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":37,"isAuthor":false,"categoryId":766226,"categoryLabel":"프로그래밍/Javascript"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://hihellloitland.tistory.com", tistoryUrl: "https://hihellloitland.tistory.com", manageUrl: "https://hihellloitland.tistory.com/manage", token: "HrsUOSuT6ZyQTfWNq1+fgvBDQytITKwGMWdgnZ8aGIU1JTm/lFdzMHkR1vh1KlMR" }; var servicePath = ""; var blogURL = ""; \n \n \n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">

<html>
<head>
    <script type="text/javascript">
        var myArray=[[1,2,3],[4,5,6]];

        for(var row in myArray){ //행을 위한 인덱스
            for(var col in myArray[row]){ // 열을 위한 인덱스
                document.write(myArray[row][col]+"");
            }
            document.write("<br>");
        }
    </script>
</head>
</html>