JS)slice(), splice()

slice()

slice() 메소드는 begin 부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다.(원본 배열은 수정되지 않는다.)

 

사용법

slice(start, end)

 

start : 추출 시작점에 대한 인덱스

• undefined인 경우 : 0부터 slice
• 음수를 지정한 경우 : 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출
• 배열의 길이와 같거나 큰 수를 지정한 경우 : 빈 배열을 반환한다.

 

end : 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까지의 요소만 추출한다.)

• 지정하지 않을 경우 : 배열의 끝까지 slice
• 음수를 지정한 경우 : 배열의 끝에서부터의 길이를 나타낸다. slice(2 ,-1)을 하면 세번째 부터 끝까지 추출
• 배열의 길이와 같거나 큰 수를 지정한 경우 : 배열의 끝까지 추출.

const arr = [1,2,3,4,5,6,7,8,9,10]

const arr1 = arr.slice(3,5); 
const arr2 = arr.slice(undefined, 5);
const arr3 = arr.slice(-3);			
const arr4 = arr.slice(-3, 9);			
const arr5 = arr.slice(12);		
const arr6 = arr.slice(4);		
const arr7 = arr.slice(undefined);		
const arr8 = arr.slice(5, -4);			
const arr9 = arr.slice(2, 15);		
 
 
console.log("arr :",arr);	
console.log("arr1 :",arr1);	
console.log("arr2 :",arr2);	
console.log("arr3 :",arr3);	
console.log("arr4 :",arr4);	
console.log("arr5 :",arr5);	
console.log("arr6 :",arr6);	
console.log("arr7 :",arr7);	
console.log("arr8 :",arr8);
console.log("arr9 :",arr9);

 

출력값 >>>

 

splice()

splice() 메소드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 이 메소드는 원본 배열 자체를 수정한다.

 

사용법

splice(start, deleteCount, item1,item2.....)

 

start : 배열의 변경을 시작할 인덱스

• 음수를 지정한 경우 배열의 끝에서 부터 요소를 센다.
• 배열의 길이보다 큰수를 지정한 경우 :  실제 시작 인덱스는 배열의 길이로 설정
• 절대값이 배열의 길이보다 큰 경우 : 0으로 세팅

 

deleteCount : 배열에서 제거할 요소의 수.

• 생략 or 값이 start보다 큰 경우 : start부터 모든 요소를 제거.
• 0이하의 수를 지정 : 어떤 요소도 제거되지 않음.

item1, item2, ... : 배열에 추가할 요소.

지정하지 않는 경우 : splice()가 요소 제거만 하게된다.

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

const arr1 =  arr.splice(10, 2, 'a', 'b', 'c');
// 10번째 부터 2개의 요소 제거, 'a', 'b', 'c'인자 추가

console.log("arr :", arr);
console.log("arr1 :", arr1);

출력값 >>>

 

 

 

 

 

 

참조 : https://im-developer.tistory.com/103

[JS/Array] slice()와 splice()의 차이점