Array.splice 메서드

배열 메서드 splice()

Array 객체의 splice 메소드에 대해 알아봅니다.

splice

• splice 배열 데이터를 원하는 만큼 삭제할 수 있습니다. 
• 기본 => splice(start, length) 즉, (해당인덱스부터, 삭제할 개수) 
• 세번째 매개변수부터는 배열에 데이터를 삽입할 수 있습니다. 
• 항상 원래 배열에서 삭제한 데이터의 배열을 반환합니다. 
• 삭제한 것이 없다면 빈 배열을 반환합니다.

요약

배열의 특정구간을 추출하거나, 특정구간에 특정 배열을 추가합니다.

문법(Syntax)

JavaScript

array.splice(index, howmany, element1, ...., elementN);

인자(Parameters)

인자명	데이터형	필수/옵션	설명
index	number	필수	배열에 추가할 특정 배열의 위치를 가르키는 index
howmany	number	필수	index에서부터 제거될 원소들의 수 index부터 index+howmany에 해당하는 원소들은 삭제된다. 이 값이 0이면 어떠한 원소도 삭제되지 않는다.
element1, ... , elementN	number	옵션	ndex와 index+howmany 사이에 추가될 값

반환값(Return)

array, index와 index+howmany 사이에 해당하는 원소들을 패키징한 배열

설명(Description)

배열에 배열을 추가하거나, 삭제할 때 사용. 

대상 구간에 해당하는 삭제될 원소들은 리턴된다. 원본이 수정된다. slice가 원본이 유지되는 것과 다르다.

JavaScript

var numbers = [1,2,3,4,5,6,7,8,9,10];
alert(numbers.splice(2)); // array, [3,4,5,6,7,8,9,10], 시작점 2부터 배열의 마지막 원소까지를 대상으로 한다.
alert(numbers); // array, [1,2], 원본이 수정된다. 
 
var numbers = [1,2,3,4,5,6,7,8,9,10];
alert(numbers.splice(2, 4)); // array, [3,4,5,6]
 
var numbers = [1,2,3,4,5,6,7,8,9,10];
alert(numbers.splice(2, 4, 'three', 'four', 'five', 'six')); // array, [3,4,5,6]
alert(numbers); // array, [1,2,three,four,five,six,7,8,9,10]

JavaScript

var arr = ['사당.','교대.','방배.','강남.'];
var removed = arr.splice(1,3); // 삭제된 배열이 반환.
console.log(arr);
console.log(removed);

var arr2 = ['사당.','교대.','방배.','강남.'];
var removed2 = arr2.splice(1,4,'역삼.','서초.');
// 배열.splice(인덱스부터, 삭제할 개수)
console.log(arr2);
console.log(removed2);

// arr2 = arr2.splice(1,0,'잠실.'); 
// arr2는 삭제된 배열이 담겨야 하지만 삭제된 배열이 없기 때문에 빈배열이 담긴다. 
// 이렇게 하면 잘못된 코딩방식.ㅋ 기존 배열을 건드리고 반환값을 기존배열에 넣었기 때문
// console.log(arr2);

arr2.splice(1,0,'잠실.');
// 두번째 매개변수가 0이라면 삭제할 개수가 0이므로 삭제하지않는다는 의미이다. 
// 그러므로 기존 배열을 삭제하지 않고 삽입만 하겠다란 의미.
console.log(arr2);

// 매개변수가 한개만 있을 경우
// 해당 인덱스부터 마지막 인덱스까지의 삭제할 배열을 반환한다.
// 매개변수가 음수값일 경우 (배열의 길이 -(매개변수음수값))
// 팁 : 마지막 인덱스값을 구할 경우를 생각할 것 
// (항상 배열의 length 에서 -1을 해주면 마지막 인덱스값을 구하는 것에 착안할 것)

var arr3 = ['사당.','교대.','방배.','강남.'];
var removed3 = arr3.splice(1);
// 매개변수 하나만 넘길 경우 해당인덱스 이상을 삭제하고 반환한다.

var str = arr3.toString();
console.log(typeof str);
console.log(arr3);
console.log(removed3);

// 두번째 매개변수가 음수값일 경우는 무조건 빈배열만 반환한다.
var arr4 = ['사당.','교대.','방배.','강남.'];
var removed4 = arr3.splice(-2, -4);

Jaehee's WebClub