slice()와 splice() 함수의 차이점
•
두 함수 다 배열을 다룰 때 자주 사용하는 함수이다
slice() 함수
Array.prototype.slice()
•
slice() 함수는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다
•
즉, 원본 배열은 수정되지 않는다! → 이부분이 큰 차이점!
slice(start[, end])
JavaScript
복사
start - 추출 시작점에 대한 인덱스
•
undefined인 경우
◦
0부터 slice
•
음수를 지정한 경우
◦
배열의 끝에서부터의 길이를 나타낸다
◦
slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다
•
배열의 길이와 같거나 큰 수를 지정한 경우
◦
빈 배열을 반환한다
end - 추출을 종료할 기준 인덱스
(end를 제외하고 그 전까지의 요소만 추출)
•
지정하지 않을 경우
◦
배열의 끝까지 slice
•
음수를 지정한 경우
◦
배열의 끝에서부터의 길이를 나타낸다
◦
slice(2, -1)을 하면 세번째부터 끝에서 두번째 요소까지 추출
•
배열의 길이와 같거나 큰 수를 지정한 경우
◦
배열의 끝까지 추출
반환값 - 추출한 요소를 포함한 새로운 배열
예시
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr1 = arr.slice(3, 5); // [4, 5]
var arr2 = arr.slice(undefined, 5); // [1, 2, 3, 4, 5]
var arr3 = arr.slice(-3); // [8, 9, 10]
var arr4 = arr.slice(-3, 9); // [8, 9]
var arr5 = arr.slice(10); // []
var arr6 = arr.slice(4); // [5, 6, 7, 8, 9, 10]
var arr7 = arr.slice(undefined); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr8 = arr.slice(5, -4); // [6]
var arr9 = arr.slice(2, 15); // [3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr1); // [4, 5]
console.log(arr2); // [1, 2, 3, 4, 5]
console.log(arr3); // [8, 9, 10]
console.log(arr4); // [8, 9]
console.log(arr5); // []
console.log(arr6); // [5, 6, 7, 8, 9, 10]
console.log(arr7); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr8); // [6]
console.log(arr9); // [3, 4, 5, 6, 7, 8, 9, 10]
JavaScript
복사
splice() 함수
•
splice() 함수는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다
•
이 함수는 원본 배열 자체를 수정한다
splice(start[, deleteCount[, item1[, item2[, …]]]])
start - 배열의 변경을 시작할 인덱스
•
음수를 지정한 경우
◦
배열의 끝에서부터 요소를 센다
•
배열의 길이보다 큰 수를 지정한 경우
◦
실제 시작 인덱스는 배열의 길이로 설정
•
절대값이 배열의 길이보다 큰 경우
◦
0으로 세팅
deleteCount - 배열에서 제거할 요소의 수
•
생략값이 array.length - start 보다 큰 경우
◦
start부터의 모든 요소를 제거
•
0 이하의 수를 지정
◦
어떤 요소도 제거되지 않는다
item1, item2, … - 배열에 추가할 요소
•
지정하지 않는 경우
◦
splice()는 요소 제거만 수행
반환값 - 제거한 요소를 담은 배열
•
아무 값도 제거하지 않았으면 빈 배열을 반환한다
→ splice() 함수를 사용하면 원본 배열인 arr이 변경된다
예시
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr1 = arr.splice(-6, 4);
console.log(arr); // [1, 2, 3, 4, 5, 6, 11, 12]
console.log(arr1); // [7, 8, 9, 10]
JavaScript
복사
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr1 = arr.splice(-13, 1);
console.log(arr); // [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
console.log(arr1); // [1]
JavaScript
복사
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr1 = arr.splice(3);
console.log(arr); // [1, 2, 3]
console.log(arr1); // [4, 5, 6, 7, 8, 9, 10, 11, 12]
var arr2 = arr1.splice(6, 4);
console.log(arr1); // [4, 5, 6, 7, 8, 9]
console.log(arr2); // [10, 11, 12]
JavaScript
복사
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr1 = arr.splice(5, 0, 'add');
console.log(arr); // [1, 2, 3, 4, 5, "add", 6, 7, 8, 9, 10, 11, 12]
console.log(arr1); // []
JavaScript
복사