[JavaScript] arr.splice() - 배열 데이터 추가/제거/교체/추출 하기

Array.prototype.splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

 

한마디로 splice() 메서드를 가지고 push/pop/unshift/shift 역할을 다 할 수 있다고 생각하면 된다.

 

▷ 구문

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start : 배열의 변경을 시작한 인덱스이다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. (음수로 설정될 경우 배열의 끝에서부터 요소를 세어나가 array.length - n 번째 인덱스를 가르키며, 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정된다.)

deleteCount : 배열에서 제거할 요소의 수이다.(deleteCount를 생략하거나 값이 array.length - start 보다 크면 start부터의 모든 요소를 제거하며, 0 이하라면 어떤 요소도 제거하지 않으나 이 때는 최소한 하나의 새로운 요소를 지정해야한다.)

item : 배열에 추가할 요소이다. (보통 배열 요소를 삭제할때는 생략해서 사용한다.)

---

▷ 예제 1) 배열 요소 추가하기

var mine = [0,1,2,3];

// 배열 2번째 위치한곳에 숫자 5를 추가한다.
mine.splice(2,0,5); // [0, 1, 5, 2, 3]

// 배열 2번째 위치한곳에 숫자 5,7을 추가한다.
mine.splice(2,0,5,7); //[0, 1, 5, 7, 2, 3]

 

▷ 예제 2) 배열 요소 제거하기

var mine = [0,1,2,3];

// 배열 1번째 부터 1개를 제거한다.
mine.splice(1,1); // [0, 2, 3]

// 배열 1번째 부터 2개를 제거한다.
mine.splice(1,2); //[0, 3]

 

▷ 예제 3) 배열 요소 교체하기

var mine = [0,1,2,3];

// 배열 1번째부터 1개를 제거하고 숫자 5로 추가한다.
mine.splice(1,1,5); // [0, 5, 2, 3]

// 배열 1번째부터 2개를 제거하고 숫자 5로 추가한다.
mine.splice(1,2,5); //[0, 5, 3]

 

▷ 예제 4) 배열 요소 추출하기

var mine = [0,1,2,3];

// 배열 1번째 부터 1개를 제거한다.
var remove = mine.splice(1,1); // [1]

// 배열 1번째 부터 2개를 제거한다.
var remove = mine.splice(1,2); //[1, 2]

---

splice() 메서드에 대해 다시한번 말해보자면

splice(startNum, deleteCount, insertValue) 라고 볼 수 있으며

 

startNum(시작 순서) 부터, deleteCount(제거개수) 몇개를 제거하고 , insertValue(넣을 값) 값을 몇개 넣어라

라는 의미를 가지고 있다고 볼 수 있다.

 

splice 함수 하나만 알면 대부분 처리가 가능하니 꼭 알아두고 가자.

 

참고  : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN