일반 Javascript 내장객체 Array (배열)

황제낙엽 2008.10.13 15:58 조회 수 : 3038 추천:99

내용 출처 : 자바 스크립트 for 웹2.0 - 오레일리 (149Page~155Page)
 
1. 기본문법
  자바스크립트에서 배열이란 String 이나 Math 와 같이 하나의 객체다. 객체를 생성할 때는 생성자를 사용한다.
 
var newArray = new Array('one', 'two');  
 
  배열은 리터럴 값으로도 사용할 수 있기 때문에 다음과 같이 명시적으로 Array 객체를 사용해서 선언하지 않아도 된다.
 
var newArray = ['one','two'];  
 
  후자의 경우에는 자바스크립트 엔진이 리터럴을 Array 타입 객체로 변환한다. 이때 그 결과를 변수에 배정한다. 그리고 일단 생성된
  배열의 각 원소는 인덱스 값을 통해 접근할 수 있다. 인덱스 값이란 배열 원소의 위치를 가르키는 숫자다.
 
alert(newArray[0]); //one을 출력한다.  
 
  배열 인덱스는 0부터 시작해서 '배열의 총 개수-1'까지 증가한다. 예를 들어, 배열에 5개의 원소가 있다면 인덱스 값은 0부터 4까지가 된다.
  
  일차원 배열만 있으란 법은 없다. 다차원 배열도 흔하다. 생성 방법은 각 용소 자체가 배열인 배열을 생성하는 것이다. 다음은 배열에
  삼차원 값을 대입한 예다.
 
var threedPoints = new Array( );   
threedPoints[0] = new Array(1.2,3.33,2.0);   
threedPoints[1] = new Array(5.3,5.5,5.5);   
threedPoints[2] = new Array(6.4,2.2,1.9);  
 
  안쪽 배열에는 x,y,z 좌표값이 순서대로 들어 있다. 그리고 세 번째 점의 z좌표값에 접근하려면 다음과 같이 한다.
 
var newZPoint = threedPoints[2][2]; // 배열 인덱스는 0부터 시작한다는 것을 잊지 말자.  
 
  배열의 차원을 늘리려면 원소에 대해 배열 생성을 계속한다.
 
threedPoints[2][2] = new Array(4.4,4.6,44) // 이와 같이 계속한다.   
var newThreedZPoint = threedPoints[2][2][1];  
 
  배열의 원소 수를 미리 지정해 놓아야할 필요는 없다. 예에서 보았듯이, 배열을 선언시, 미리 원소 수를 많이 선언할 수도 있고
  프로그램 실행중에 추가할 수도 있다. 또한 n번째 원소 또는 마지막 원소를 배정해서 크기를 설정할 수도 있다.
 
var testArray = new Array();   
testArray[99] = 'some value'; // 이로써 testArray 배열에는 100개의 원소가 들어갈 수 있다.  
 
2. 기본함수
  1) 배열의 길이    
alert(testArray.length); // 배열의 길이를 출력한다.  
  2) splice를 이용하여 배열의 원소를 제거/추가하기
var fruitArray = new Array('apple','peach','orange','lemon','lime','cherry');   
var removed = fruitArray.splice(2,2,'melon,banana');   
document.writeln(removed + "<br/>");   
document.writeln(fruitArray);   
//splice를 이용해 인덱스 2(즉, 세번째 원소)부터 2개의 원소(orange, lemon)를 제거하고 2개의 원소(melon, banana)를 추가한다.  
 
    실행 결과는 다음과 같다.
 
    orange,lemon                                    
    apple,peach,melon,banana,lime,cherry
 
    splice메소드는 제거된 원소를 배열값으로 반환한다.
 
  3) slice메소드를 이용하여 지정한 범위에 해당하는 부분 배열을 취득한다.
 
fruitArray.slice(2,4); //melon,banana,lime 을 반환한다.  
 
  4) concat메소드를 이용하여 배열에 덧붙이기   
 
var newFruit = fruitArray.concat(removed)   
// apple,peach,melon,banana,lime,cherry,orange,lemon 을 반환한다.  
 
  concat와 slice는 원래의 배열을 변경하지 않는다. 대신 수행 결과를 배열로 반환한다.
  위 예에서는 배열을 직접 출력했다. 자바스크립트 엔진은 쉼표(,)를 구분자로 사용해 배열을 문자열로 변환한다.
  쉼표 대신 다른 구분자를 지정하고 싶다면 join 메소드를 사용한다.
  var string = fruitArray.join('*'); // 쉼표(,) 대신 별표(*)를 구분자로 사용한다.
  reverse 메소드를 사용하면 배열 원소들의 순서를 뒤집을 수 있다.
  fruitArray.reverse();
  대체로 배열 원소들의 정확한 순서는 중요하지 않다. 하지만 큐와 같이 순서를 정확히 유지해야 하는 경우에는 중요하다.
 
3. 응용 (FIFO)
4. 연관 배열 (Map)
5. 콜백함수
 
 
APIS
concat()  Joins two or more arrays, and returns a copy of the joined arrays
indexOf()  
join()  Joins all elements of an array into a string
pop()  Removes the last element of an array, and returns that element
push()  Adds new elements to the end of an array, and returns the new length
reverse()  Reverses the order of the elements in an array
shift()  Removes the first element of an array, and returns that element
slice()  Selects a part of an array, and returns the new array
sort()  Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new length
valueOf() Returns the primitive value of an array
번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 3419
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 3987
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 3842
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 3352
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 3669
241 fetch() 사용 예제들 황제낙엽 2024.07.09 3380
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 3758
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 3805
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 3270
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 3615
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 3361
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 3605
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 4209
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 3660
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 3715
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 3672
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 3703
229 navigator.mediaDevices 황제낙엽 2023.08.21 3798
228 Barcode Detection API 황제낙엽 2023.08.06 3854
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 2894