Javascript Array 의 유용한 메소드들

Java 의 Vector 클래스는 내부적으로 배열을 사용하고 있다. 따라서 Vector 의 자바스크립트 버전을 만들기 위해서는 Array 객체에 대한 빵빵한 지식이 필요하다 (없어도 된다. 그러나 있으면 매우 좋다). 자! 배열의 기초와 유용한 메쏘드들을 살펴보자.
배열의 생성
1. 생성자를 이용한 생성
- new Array(arrayLength)
ex) friends = new Array(3); // 크기가 3 인 배열 생성
- new Array(element0, element1, ... , elementN)
ex) friends = new Array("개똥이", "소똥이", "말똥이"); // 크기 3인 배열 생성(값이 채워짐)
2. 직접 생성
friends = ["개똥이", "소똥이", "말똥이"];
간접적인 배열 길이의 증가
배열의 길이는 현재 배열의 길이보다 큰 인덱스를 사용하면 자동으로 증가한다. 아래는 배열의 길이가 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"
unshift : 하나 또는 여러개의 요소를 배열의 왼쪽에 추가한다. 배열길이는 증가한다.
문법
arrayName.unshift(element1,..., elementN)
인자
element1,...,elementN - 배열의 앞쪽에 들어갈 요소들
예제
numbers = ["0", "1", "2"];
numbers.unshift("-2", "-1"); // ["-2", "-1", "0", "1", "2"]

null

by 라셍 | 2005/02/01 09:38 | JavaScript | 트랙백 | 핑백(2) | 덧글(10)

트랙백 주소 : http://jhjang.egloos.com/tb/2369285
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Linked at &raquo; [Javasc.. at 2012/06/28 11:15

... 20;-2&#8243;, &#8220;-1&#8243;); // ["-2", "-1", "0", "1", "2"] &#8230; &#8230; 복사 : 그남자네 집 Posted in JavaScript by ksprg Leave a Reply Name (required) Mail (will not be pu ... more

Linked at [링크]Javascript A.. at 2012/10/10 01:52

... script Array의 유용한 메소드들 제 블로그 글은 링크 허용 펌 금지입니다. 작성일자: 2010/01/21 글쓴이: 녹풍 Javascript Array 의 유용한 메소드들이라는 쓸모 있어 보이는 글을 발견. 배열은 참 중요하다. 가장 기본적인, 그룹을 다루는 것이기 때문이다. 객체 지향에서 ... more

Commented by classicfilm at 2005/03/02 13:58
님의 글을 저의 블로그에 붙였습니다. 미리 허락얻지 못해 죄송합니다.
혹, 내용 복사를 허락 하지 않으신다면, 연락 주십시오. 삭제하겠습니다.
님의 좋은글 잘 참고했습니다.
Commented by 봄,여름,가을... at 2005/03/03 09:21
필요한 정보가 되었으면 합니다...
출처만 남기시면 언제든지 정보공유는 가능합니다..
그것은 서로의 예의라고 생각이 되기에...^^;
Commented by 비타민 at 2005/10/04 10:47
저도 가져갈께요~

뭐.. 문제된다고 생각되시면 말씀하시면 지울께요~

몇개의 오타는 있지만.. 잘 쓰셨네여.. 공부중이였는데.. 잘 정리하신것 같네요~
Commented by 득스 at 2006/05/16 19:08
감사합니다 잘사용할께요.. ^^
Commented by devlee at 2011/03/20 12:41
좋은글 담아 갑니다.
출처남기고 수정없이 담아갈게요.
Commented by Mins at 2013/12/19 11:52
너무 유용하게 보았습니다~ 도움이 되었네요, 감사합니다.
Commented by 면듀 at 2015/07/11 15:16
공부하는데 너무 도움이 많이 되었습니다. 한번에 정리해서 써놓으셔서 제가 궁금해하던 것들이 모두 해결됬네요. 정말정말 유용하게 보았습니다. 감사합니다.
Commented by Dante at 2015/10/01 10:27
저도 담아 갑니다.
출처 및 수정은 확실히 하겠습니다.
Commented by whydda at 2015/11/10 16:00
종은글 감사합니다.
링크걸어놨습니다.
Commented by 애니 at 2016/04/25 12:09
좋은 정보 감사합니다. 많은 도움이 되어서 덧글 남김니다.
감사합니다.

:         :

:

비공개 덧글

<< 이전 페이지다음 페이지 >>