[자바스크립트/javascript] slice() / splice()

1.slice()

MDN에서 정의하는 slice() : 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

 

const number = [0,1,2,3,4,5,6,7,8,9];
console.log(number.slice(1,6));
// Array [1, 2, 3, 4, 5]

slice(n,m) => n부터 m까지의 배열 반환

 

 

const number = [0,1,2,3,4,5,6,7,8,9];
console.log(number.slice(6,));
//Array [6, 7, 8, 9]

slice(n,) or slice(n) =>n부터 마지막까지의 배열 반환

 

 

const number = [0,1,2,3,4,5,6,7,8,9];
console.log(number.slice(-3));
//Array [7, 8, 9]

slice(-n) => 뒤에서부터 n까지의 배열 반환

 

 

const number = [0,1,2,3,4,5,6,7,8,9];
console.log(number.slice(2,-3));
//Array [2, 3, 4, 5, 6]

slice(n,-m) => n부터 뒤에서부터 m까지의 배열 반환

 

 

---

 

2. splice()

MDN에서 정의하는 splice(): 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

 

slice는 문자열에서도 사용이 가능했으나, splice는 문자열에서는 사용이 불가능했다.

 

 

splice를 직접 출력하면 삭제된(교체된)부분만을 반환한다.

혹은 삭제된 부분을 다른 변수에 지정해줄 수 있다.

const numbers = [0,1,2,3,4,5,6,7,8,9];
console.log(numbers.splice(-3));
//Array [7, 8, 9]

const numbers = [0,1,2,3,4,5,6,7,8,9];
const removed = numbers.splice(-3,2)
console.log(removed);
//Array [7, 8]

이런 식으로

 

 

 

const numbers = [0,1,2,3,4,5,6,7,8,9];
numbers.splice(1,3)
console.log(numbers);
//Array [0, 4, 5, 6, 7, 8, 9]

slice(n,m) => n에서부터 m개의 요소가 삭제

 

 

const numbers = [0,1,2,3,4,5,6,7,8,9];
numbers.splice(1,3,"hello")
console.log(numbers);
//Array [0, "hello", 4, 5, 6, 7, 8, 9]

const numbers = [0,1,2,3,4,5,6,7,8,9];
numbers.splice(1,3,"one","two","three")
console.log(numbers);
//Array [0, "one", "two", "three", 4, 5, 6, 7, 8, 9]

slice(n,m,교체할요소) => n에서부터 m개의 요소가 교체할요소로 교체됨

 

 

const numbers = [0,1,2,3,4,5,6,7,8,9];
numbers.splice(-3)
console.log(numbers);
//Array [0, 1, 2, 3, 4, 5, 6]

slice(-n) => 뒤에서부터 n개의 요소 삭제

 

 

const numbers = [0,1,2,3,4,5,6,7,8,9];
numbers.splice(-3,2)
console.log(numbers);
//Array [0, 1, 2, 3, 4, 5, 6, 9]

slice(-n,m) => -n인덱스부터 m개의 요소 삭제