[ES6][JS] Javascript 배열 사용법과 관련 함수
◆목표
Javascript 배열 사용법
- CRUD 방법(생성, 읽기, 수정, 삭제)
- 배열과 관련된 함수
1. Javascript 배열 생성
1) 배열 생성(기본)
const data = [1, 2, 3, "dave", true];
2) 배열 안에 객체 선언
- {} 괄호는 JS에서는 객체 리터럴로 인지하고, 객체 또한 배열의 아이템으로 선언도 가능함
const data_object = [
{ name: "dave", age: 2 },
{ name: "dave", age: 2 }
];
3) 2차원 배열
const arr = [
[1, 2, 3],
[4, 5, 6]
];
4) New 태그 사용
- JS는 배열을 객체로 인지하기 때문에 NEW 태그 사용이 가능함
const data1 = new Array();
//인덱스는 0번 부터 시작
data1[0] = 1;
data1[1] = 2;
2. Javascript 배열 읽기
1) 기본 배열 접근
- 인덱스로 접근하여 사용함 (인덱스 번호는 0번부터 시작함)
const data =[2,3,4];
console.log(data[1]);
2) 객체로 구성된 배열 접근
const data_object = [
{ name: "dave", age: 2 },
{ name: "dave", age: 2 }
];
console.log(data_object[0].name);
3) 2차원 배열 접근
const arr = [
[1, 2, 3],
[4, 5, 6]
];
console.log(arr[0][1]);
4. Javascript 배열 삭제
1) 배열 삭제
- JS에서는 배열을 삭제할 때 Splice(삭제를 시작할 인덱스 번호, 시작 위치에서 몇 개 삭제할 것인지 개수) 함수 사용
const data =[2,3,4];
console.log("삭제 전:"+data);
data.splice(1,1);
console.log("삭제 후:"+data);
5. Javascript 배열과 관련된 함수
1) push()
- 배열의 끝에 아이템을 추가함
- 사용법: 배열. push(추가할 아이템)
const data =[2,3,4];
console.log("추가 전:"+data);
data.push(5);
console.log("추가 후:"+data);
2) pop()
- 배열의 끝에 아이템을 리턴해주고, 해당 아이템은 배열에서 삭제됨
- 사용법: 배열.pop()
const data =[2,3,4];
console.log("실행 전:"+data);
let output = data.pop();
console.log("실행 후:"+data);
console.log("추출한 데이터:"+output);
3) shift()
- 배열의 첫 번째 아이템을 삭제하고, 뒤에 있는 아이템을 앞당김
- 사용법: 배열.shift()
- 출력: 실행 전: [2,3,4] -> 실행 후 : [2,3]
const data =[2,3,4];
console.log("실행 전:"+data);
data.shift();
console.log("실행 후:"+data);
4) concat()
- 배열 합칠 때 사용
- 사용법: 배열A.cancat(배열B)
- 출력: 실행 후 : [2,3,4,5,6,7]
const dataA =[2,3,4];
const dataB =[5,6,7];
const dataAB = dataA.concat(dataB);
console.log("실행 후:"+dataAB);
5) join()
- 아이템 사이에 특정 문자열을 넣어서, 새로운 문자열을 만드는 것
- 사용법: 배열.join(문자열)
- 출력: 실행 후 : 2'a'3'a'4
let dataA =[2,3,4];
dataA = dataA.join('a');
console.log("실행 후:"+dataA);