이번 피드에서는 배열의 기본 사용방법을 알아보겠습니다.
배열생성, 배열 초기화, 배열을 0으로 초기화, 배열에 특정값을 넣어 초기화, 배열에 값을 입력, 삭제하는 방법입니다.
1. 배열 생성(배열초기화)
배열을 생성, 초기화하는 방법은 매우 간단합니다.
우선 코드로 확인해 보겠습니다.
1
2
3
4
5
6
7
8
|
// 배열 기본 선언
var arr1 = [];
var arr2 = new Array();
// 배열 값을 넣어 초기화
var arr3 = [1,2,3,4,5]; // 결과값 : [1,2,3,4,5]
var arr4 = new Array(5); // 결과값 : [] => length가 5인 배열 생성
var arr5 = new Array(1,2,3,4,5); // 결과값 : [1,2,3,4,5]
|
cs |
위와 같이 초기화를 해줄때, 값을 입력하지 않고 초기화를 할 수도있고, 원하는 값을 입력하고 초기화를 할 수도 있습니다.
살펴보면 큰 스타일은 두가지 인데요.
1 ) 일반적인 배열 선언
var arr1 = [];
2 ) 생성자를 이용한 배열에 사이즈를 지정해서 초기화 가능
var arr2 = new Array();
두가지 방법에 기능은 같기때문에 각자의 상황에 맞게 선택하여 사용하시면 되겠습니다.
2. 문자열, 임의의 값, 0을 넣고 배열 초기화
이번에는 사용자가 원하는 값을 입력하여 초기화 하는 방법을 알아보겠습니다.
이번 초기화 방법은 기본 초기화 방법과 달리 한번에 원하는 사이즈의 배열에 원하는 값을 한번에 초기화 하는 방법입니다.
우선 코드는 아래와 같습니다.
1
2 3 4 5
|
var arr1 = Array.apply(null, new Array(5)).map(Number.prototype.valueOf,0);
// arr1 결과값 : [0, 0, 0, 0, 0] var arr2 = Array.apply(null, new Array(5)).map(String.prototype.valueOf,"Test")
// arr2 결과값 : ["Test","Test","Test","Test","Test"] |
cs |
1) 숫자형 값 입력하여 초기화 (EX: 0)
var arr1 = Array.apply(null, new Array(5)).map(Number.prototype.valueOf, 원하는 숫자값 입력);
ex) var arr1 = Array.apply(null, new Array(5)).map(Number.prototype.valueOf, 0);
=> [0,0,0,0,0] : 값이 0이고, 크기가 5인 배열 생성
2) 문자형 값 입력하여 초기화 (EX: TEST)
var arr2 = Array.apply(null, new Array(5)).map(String.prototype.valueOf,"원하는 문자값 입력");
ex) var arr2 = Array.apply(null, new Array(5)).map(String.prototype.valueOf,"Test");
=> ["Test","Test","Test","Test","Test"] : 값이. Test이고, 크기가 5인 배열 생성
위와 같이 사용자가 원하는 문자형, 숫자형 값을 입력하여 원하는 크기의 배열을 생성할 수 있습니다.
3. 배열에 값 입력(PUSH)
배열 생성방법을 알아봤으니, 값을 추가해주는 방법을 알아보겠습니다.
값입력 역시 매우 간단합니다.
코드는 아래와 같습니다.
1
2
3
4
5
6
|
var arr1 = []; // 배열 생성
// 값 입력
arr1.push(1); // arr : [1]
arr1.push(2); // arr : [1,2]
arr1.push(3); // arr : [1,2,3]
|
cs |
배열에 값 입력은 push를 이용해서 해주면 됩니다.
arr.push(입력값);
위와 같이 원하는 값을 배열에 입력해 줄 수 있습니다.
4. 배열에 값 삭제(splice)
배열에 값을 입력 했으니 삭제도 필요하겠죠.
코드로 확인해 보겠습니다.
1. 원하는 특정 값 삭제
1
2
3
4
5
6
7
8
9
|
var arr1 = ["test1","test2","test3"]; // 결과값 : ["test1","test2","test3"]
var idx = arr1.indexOf("test2"); // "test2"의 index값을 추출
if (idx > -1){
arr1.splice(idx, 1); //index값을 이용하여 arr1배열에서 "3" 값 삭제
}
console.log(arr1); // 결과값 : ["test1","test3"]
|
/cs |
배열에 값을 삭제하기 위해서는 splice()함수를 이용해 주면됩니다.
1 ) 원하는 값의 배열에서의 index값을 추출하여
var idx = arr1.indexOf("test2");
2 ) splice()함수를 이용하여 삭제
arr1.splice(idx, 1);
위와 같이 사용하면 쉽게 원하는 값을 배열에서 삭제할 수 있습니다.
2. 배열 전체 값 삭제(초기화)
특정값이아닌 배열 전체값을 삭제하고 싶은경우도 있습니다.
그때도 splice()함수를 이용하여 간단히 처리가 가능합니다.
1
2
3
4
5
|
var arr1 = ["test1","test2","test3"]; // 결과값 : ["test1","test2","test3"]
arr1.splice(0,arr1.length); // 배열의 크기를 이용하여, 배열값 전체 삭제
console.log(arr1); // 결과값 : [] |
//cs |
위와같이 배열의 크기를 이용하여 배열의 값을 전체 삭제할 수 있습니다.
이상으로 배열의 생성, 초기화, 값입력, 삭제에 대해 알아봤습니다.
이번 피드는 이쯤에서 마무리 하겠습니다.
'노빠꾸 개발일지 > JQUERY & JAVASCRIPT' 카테고리의 다른 글
[Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post) (0) | 2020.10.11 |
---|---|
[Javasript/Jquery] Json데이터 파싱 사용법 정리(Json 파싱) (2) | 2020.10.10 |
[Javascript] 자바스크립트 날짜(Date) 함수 정리 (2) | 2020.10.07 |
[js/css] js파일, css파일, img파일 사용시 캐시 방지 팁 (1) | 2020.10.05 |
[D3.js] D3.js란? (2) | 2020.09.30 |