본문으로 바로가기

자바스크립트의 Array

category JavaScript 2018. 7. 11. 12:09
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


자바스크립트의 Array


자바스크립트 배열의 생성 방법

리터럴 방식, 클래스 방식을 사용하여 배열을 만들 수 있습니다. 두 가지 방식은 다른 것처럼 보이지만 리터럴 방식으로 실행되면 클래스 방식으로 치환되어 실행됩니다.

//리터럴 방식 var array = ['ktko1', 'kkt', 'ktko0714', 'kyungtae']; //클래스 방식 var array = new Array('ktko1', 'kkt', 'ktko0714', 'kyungtae');


아래는 Array가 가지고 있는 메서드를 작성해보았습니다.

메서드

설명 

join()

배열을 문자열로 변환하여 반환 

split() 

문자열을 배열로 변환하여 반환 

push() 

배열 마지막 위치에 배열 요소 추가 

unshift()

배열 첫 번째 위치에 배열 요소 추가 

splice()

배열 N 번째 위치에 배열 요소 추가 

shift() 

첫 번째 요소 삭제되며 삭제된 값을 반환

pop() 

배열의 마지막 번째 요소를 삭제하며 삭제된 값을 반환 

sort()

배열의 요소를 정렬 




//join() 배열을 문자열로 만들기 var array = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; var result = array.join("-"); console.log(result); //ktko1-ktko2-ktko3-ktko4 를 반환 //split() 문자열을 배열로 만들기 var str = 'ktko1-ktko2-ktko3-ktko4'; var resultArray = str.split('-'); console.log(resultArray); //[ 'ktko1', 'ktko2', 'ktko3', 'ktko4' ] //push() 특정 위치에 배열 요소 추가 var array = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; array.push('ktko5'); console.log(array); //[ 'ktko1', 'ktko2', 'ktko3', 'ktko4', 'ktko5' ] //unshift() 첫 번째 위치에 배열 요소 추가하기 var array = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; array.unshift('ktko0'); console.log(array); //[ 'ktko0', 'ktko1', 'ktko2', 'ktko3', 'ktko4' ] //splice() 배열의 N 번째 위치에 배열 요소 추가하기 //배열.splice(start, deleteCont, [,element]); //start : 추가 또는 삭제할 배열 요소의 시작 위치 //deleteCount : start부터 시작하여 삭제할 배열 요소의 개수, 요소를 추가할 때는 0을 적용 //element : 추가 요소 var array = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; array.splice(3, 0, 'ktko3-1'); console.log(array); //[ 'ktko1', 'ktko2', 'ktko3', 'ktko3-1', 'ktko4' ] //splice()를 응용하여 N번째 배열 요소 삭제하기 var array = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; array.splice(2,1); console.log(array); //[ 'ktko1', 'ktko2', 'ktko4' ] //shift() 첫 번째 요소 삭제가 되고 삭제된 값이 리턴 var array = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; console.log(array.shift()); //ktko1 console.log(array); //[ 'ktko2', 'ktko3', 'ktko4' ] //pop() 마지막 요소가 삭제되고 삭제된 값이 리턴 var array = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; console.log(array.pop()); //ktko4 console.log(array); //[ 'ktko1', 'ktko2', 'ktko3' ]


sort()를 이용하여 문자열 또는 숫자를 오름차순 내림차순 할 수 있습니다. 전에 포스팅햇던 내용이라 링크를 첨부해드립니다.

http://ktko.tistory.com/234?category=661829




대부분 for문으로 배열을 접근할 때 아래와 같은 방법을 접근하여 사용합니다. 이 방법이 잘못된 것은 아니지만 그래도 유용한 상황에 그때그때 더 좋은 방법으로 코딩하는 것도 나쁘지 않다고 생각하여 정리해 보았습니다.

//////////////////////////////////////////////////////////

var name = ['ktko1', 'ktko2', 'ktko3', 'ktko4'];

for(var i=0; i < name.length; i++) { name[i] = name[i] + ' is hello'; } console.log(name); //[ 'ktko1 is hello', 'ktko2 is hello', 'ktko3 is hello', 'ktko4 is hello' ]

//////////////////////////////////////////////////////////


//Array.foreach()

//배열 전체를 돌며 해당 배열의 요소에 직접 어떤 작업을 수행하고 싶을 때 적합.///

var name = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; name.forEach(function(value, index, array) { name[index] = value + ' is hello'; }); console.log(name); //[ 'ktko1 is hello', 'ktko2 is hello', 'ktko3 is hello', 'ktko4 is hello' ] //Array.map()

//기존에 선언된 배열의 데이터를 활용하여 새로운 배열을 생성할 때 사용.

var name = ['ktko1', 'ktko2', 'ktko3', 'ktko4']; var newName = name.map(function(value, index, array) { return value + ' is hello'; }); console.log(name); //[ 'ktko1', 'ktko2', 'ktko3', 'ktko4' ] console.log(newName); //[ 'ktko1 is hello', 'ktko2 is hello', 'ktko3 is hello', 'ktko4 is hello' ]

//Array.filter()

//특정 케이스만 filter 체크하여 새로운 배열을 만든다.

var name = ['aa', 'bb', 'cc', 'dd', '고경태' ]; var newName = name.filter(function(value, index, array) { return !!~value.search(/[ab]+/); }); console.log(newName);