자바스크립트에서 배열에 요소를 추가하는 방법
추가 - push() / unshift() / splice() / 배열이름[n]
push()
- 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
문법 : arr.push(element1[, ...[, elementN]])
const array = ['A', 'B', 'C']
const add = array.push('D');
console.log(array) // ["A","B","C","D"]
//여러개 추가할 경우
const array = ['A', 'B', 'C']
const add = array.push('D', 'E', 'F');
console.log(array) // ["A","B","C","D","E","F"]
unshift()
- 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.
문법 : arr.unshift([...elementN]);
const array = ['A', 'B', 'C']
const add = array.unshift('D');
console.log(array) // ["D","A","B","C"]
splice()
- 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
문법 : array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) (Optional는 deleteCount, items1, item2)
start : 배열의 변경을 시작할 인덱스
deleteCount : 0 이하라면 어떤 요소도 제거하지 않는다. ( 추가하고 싶을 때 0 기입 )
그래서 제거하지 않고 원하는 위치에 요소를 추가 할 수 있다.
const array = ['A', 'B', 'C']
const add = array.splice(2, 0, 'D');
console.log(array)
// ["A","B","D","C"] index 2 ('C')위치에 'D' 추가 ["A","B","D","C"]
배열이름[n]
- 특정 위치에 요소를 추가하는 방법
const array = ['A', 'B', 'C', 'D', 'E']
array[6] = 'H'
console.log(array)
// ["A","B","C","D","E", undefined,"H"]
삭제 - pop() / 배열이름.length -1 / shift() / splice() / delete
pop()
- 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.
문법 : arr.pop();
const array = ['A', 'B', 'C']
const out = array.pop();
console.log(array) // ["A","B"]
배열이름.length -1
- 배열의 마지막 요소를 제거하는 방법
const array = ['A', 'B', 'C', 'D', 'E']
array.length = array.length -1;
console.log(array)
// ["A","B","C","D"]
shift()
- 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.
문법 : arr.shift();
const array = ['A', 'B', 'C']
const out = array.shift();
console.log(array) // ["B","C"]
splice()
- 특정 위치에서 부터 원하는 만큼 삭제
- splice('위치 값n', '제거할 요소의 갯수')
const array = ['A', 'B', 'C', 'D', 'E']
const out = array.splice(2, 1);
// ["A","B","D","E"] index 2 부터 1개의 요소('C')를 제거
const out = array.splice(2, 2);
// ["A","B","E"] index 2 부터 2개의 요소('C', 'D')를 제거
delete
- 배열의 요소는 그대로 두고 값만 삭제하는 방법
- 배열의 length 속성에 영향을 주지 않는다.
const array = ['A', 'B', 'C', 'D', 'E']
delete array[1];
console.log(array)
// ["A",undefined,"C","D","E"]
참고
'Javascript' 카테고리의 다른 글
특정 위치에 해당하는 문자 찾기 (0) | 2024.08.25 |
---|---|
특정 문자 위치 찾기 - indexOf 함수 (0) | 2024.08.25 |
Set 함수 (0) | 2024.08.25 |
배열 중복 제거하기 (0) | 2024.08.25 |
객체 접근 방법 (0) | 2024.08.25 |