[펌글] 자바스크립트(javascript) 배열(array) 관련 문법 정리

By | 5월 9, 2012


* 자바스크립트 배열(array) 관련 문법

- 출처 : http://www.yunsobi.com/blog/3 -

- 배열의 생성
          
          var arr = [1,2,3,4,5];                  
//리터럴로 생성

var arr = new Array();                    //Array 클래스로 생성
var arr = new Array(5);                  //배열의 길이 지정 (인수가 한 개일 경우)
var arr = new Array(1,2,3,4,5);      //배열의 생성과 동시에 초기화

 간접적인 배열 길이의 증가 

    배열의 길이는 현재 배열의 길이보다 큰 인덱스를 사용하면 자동으로 증가한다. 
    아래는 배열의 길이가 0 인 객체 생성 후 99번째 요소에 값을 할당하여 배열의 길이가 100 으로 증가한 예이다.

    friends = new Array();
    friends[99] = "새똥이";
    

- 배열 조작 함수
concat : 두개의 배열을 합쳐 새로운 배열을 리턴한다. 원본 배열은 변하지 않는다.
           
        문법 - arrayName.concat(arrayName2, arrayName3, ... , arrayNameN)
  인자 - arrayName2, ... , arrayNameN - 합쳐질 인자들
  예제 - 두 배열을 합치는 예
alpha = new Array("a", "b", "c");
            numeric = new Array(1, 2, 3);
            alphaNumeric = alpha.concat(numeric); // ["a", "b", "c", 1, 2, 3] 배열 생성
    

    join : 모든 요소가 구분자로 이어진 문자열을 리턴한다. 디폴트 구분자는 comma(,) 이다.

        문법 -  arrayName.join(separator)
        인자 -  separator 요소와 요소 사이에 사용될 구분자 문자열
        예제 -  friends = new Array("소똥이", "개똥이", "말똥이");
            strFriends1 = friends.join(); // 소똥이,개똥이,말똥이
            strFriends2 = friends.join(", "); // 소똥이, 개똥이, 말똥이
            strFriends3 = friends.join(" + "); // 소똥이 + 개똥이 + 말똥이
    

    pop : 배열의 마지막 요소를 삭제한 후 그 값을 리턴하고 배열의 크기를 줄인다.

    
        문법 - arrayName.pop()
        인자 - 없음
        예제 - 말똥이가 pop 되고 배열에는 "개똥이", "소똥이"만 남는다. 
                 배열크기도 2로 줄어든다.
                    friends = ["개똥이", "소똥이", "말똥이"];
                    popped = friends.pop(); // popped 에 말똥이가 할당된다.
    

    push : 배열에 하나 또는 여러개의 값을 넣고 새로운 배열의 길이를 리턴한다.(배열길이 증가)
    
        문법 - arrayName.push(element1, element2, ... , elementN)
        인자 - element1, element2, ... , elementN - 추가될 요소들
        예제 - friends = ["개똥이", "소똥이"];
                 pushed = friends.push("말똥이", "새똥이"); // ["개똥이", "소똥이", "말똥이", "새똥이"] 
                 alert(pushed); // 4
    

    reverse : 배열 요소를 역순으로 재배치한다(첫번째 요소는 마지막으로, 마지막 요소는 처음으로).
        문법 - arrayName.reverse()
        인자 - 없음
        예제 - myArray = new Array("1", "2", "3");
                 myArray.reverse(); // ["3", "2", "1"]
    

    shift : 첫번째 요소를 삭제하고 배열의 길이를 하나 줄인 후, 삭제된 요소를 리턴한다.
        
        문법 - arrayName.shift()
        인자 - 없음
        예제 - friends = ["개똥이", "소똥이", "말똥이"];
                 shifted = friends.shift(); // ["소똥이", "말똥이"]
                 alert("삭제된 요소는 " + shifted + " 입니다."); // 개똥이
    

    slice : 얇게 썬 슬라이스 치즈가 생각난다(^^). 배열의 일부를 잘라내어 새로운 배열을 리턴한다.

        문법 - arrayName.slice(begin[,end]) : [] 은 선택사항임
        인자 - begin - 0보다 큰 시작 인덱스 (필수)
                 end - 0보다 큰 끝 인덱스 (선택). 지정되지 않으면 배열의 끝까지 복사된다.
        예제 - numbers = ["0", "1", "2", "3", "4"];
                 sliced1 = numbers.slice(2, 3); // ["2"]
                 sliced2 = numbers.slice(2); // ["2", "3", "4"]
    

    sort : 배열의 요소를 정렬한다.
        문법 - arrayName.sort([compareFunction])
        인자 - compareFunction - 정렬방법을 지정한 함수. 
                 생략시에는 요소들의 toString() 값을 사전순서(Dictionary order) 대로 정렬한다.
                 compareFunction(a, b) 에서
                    1) a > b : 0 보다 큰 값 리턴
                    2) a = b : 0 리턴
                    3) a < b : 0 보다 작은 값 리턴
        예제
    // 역행 정렬
    function descComparator(a, b) {
    return b - a;
    }
    
    // 순행 정렬
    function ascComparator(a, b) {
    return a - b;
    }
    
                numbers = ["0", "1", "2", "3", "4"];
                numbers.sort(); // ["1", "2", "3", "4", "5"]
                numbers.sort(ascComparator); // ["1", "2", "3", "4", "5"]
                numbers.sort(descComparator); // ["4", "3", "2", "1", "0"]
    

    splice : 이전 배열요소를 삭제하고 새로운 내용물을 추가하는 형태로 배열 내용을 변경한다. 
               삭제된 요소들은 리턴된다. Vector 와 유사한 기능을 하므로 숙지하자.
        문법 - arrayName.splice(index, howMany, [element1][, ..., elementN])
        인자 - index - 변경하고자 하는 요소의 시작 인덱스
                  howMany - 삭제하고자 하는 이전 배열요소 갯수.
                  element,...,elementN - 추가하고자 하는 배열 요소들
        예제
    // numbers[2]부터 2개("2", "3")를 삭제하고 그 자리에 "5"와 "6" 을 삽입한다. 
    numbers = ["0", "1", "2", "3", "4"];
    spliced = numbers.splice(2, 2, "5", "6"); // ["0", "1", "5", "6", "4"]
                alert(spliced); // "2", "3"

        참고 - http://www.w3schools.com/jsref/jsref_splice.asp
    

    unshift : 하나 또는 여러개의 요소를 배열의 왼쪽에 추가한다. 배열길이는 증가한다.
        문법 - arrayName.unshift(element1,..., elementN)
        인자 - element1,...,elementN - 배열의 앞쪽에 들어갈 요소들
        예제
            numbers = ["0", "1", "2"];
            numbers.unshift("-2", "-1"); // ["-2", "-1", "0", "1", "2"]

* 참고 링크

   http://www.hunlock.com/blogs/Mastering_Javascript_Arrays