배열을 관리할때 특정 index의 값을 얻거나 그 값을 삭제하고 싶을때가 있다.
그 때에 slice나 splice를 활용할 수 있다.
slice 함수는 먼저 인자 하나를 넣는다면 넣은 인자의 index값부터 끝index 값까지 복사하여 받는다.
var arr = [0,1,2,3,4,5];
var result=arr.slice(3);
console.log(result);
>[3,4,5]
3번 index(시작 인덱스가 0)의 3부터 마지막index의 5까지의 값이 복사되어 배열로 반환된다
음수를 인자에넣으면 뒤에서부터 index의 절대값번째의 수를 반환한다
var arr = [0,1,2,3,4,5];
var result=arr.slice(-1);
console.log(result);
>[5]
slice에 인자를 두개 넣어준다면 첫번째 인자의 index부터 두번째 인자의 index바로 전까지의 값을 복사하여 배열 형태로 받는다
var arr = [0,1,2,3,4,5];
var result=arr.slice(3,5);
console.log(result);
>[3,4]
3번 index(시작 인덱스가 0)의 3부터 마지막index의 5의 바로전 index의 4까지의 값이 복사되어 배열로 반환된다
var arr = [0,1,2,3,4,5];
var result=arr.slice(-3,-1);
console.log(result);
>[3,4]
뒤에서 3번째 index부터 뒤에서 첫번째 index바로 전까지를 출력
이때 중요한점은 slice함수를 사용한뒤에 본 배열 arr에 변화는 없다
var arr = [0,1,2,3,4,5];
var result=arr.slice(3,5);
console.log(arr);
>[0,1,2,3,4,5]
나는 특정 인덱스들의 값을 얻고 그 값을 삭제하고 싶다면 어떻게 할까 바로 splice 함수를 이용해야 한다.
splice함수는 배열의 특정 인덱스부터 원하는 갯수의 인덱스를 배열 형태로 반환하고 그 부분을 삭제한다
slice처럼 인자의 index부터 끝 index까지의 수를 반환한다
var arr = [0, 1, 2, 3, 4, 5];
var result = arr.splice(3);
console.log(result);
>[3,4,5]
slice처럼 3번 index부터 마지막index까지의 값을 배열형태로
var arr = [0, 1, 2, 3, 4, 5];
var result = arr.splice(-2);
console.log(result);
>[4,5]
뒤에서 두번째부터의 수를 반환
첫번째 인자의 index부터 두번째 index의 갯수 만큼의 수를 배열 형태로 반환한다
var arr = [0, 1, 2, 3, 4, 5];
var result = arr.splice(2,3);
console.log(result);
>[2,3,4]
index 2번부터 3개의수인 [2,3,4]를 반환한다
splice 함수를 실행하고나면 그 부분을 반환받고난 부분은 본 배열에서 삭제된다
var arr = [0, 1, 2, 3, 4, 5];
var result = arr.splice(2,3);
console.log(result);
>[2,3,4]
console.log(arr);
>[0,1,5]
인자가 2개일때 처럼 첫번째 인자의 index부터 두번째 index의 갯수 만큼의 수를 배열 형태로 반환하고 3번째 부터의 인자들을 본배열에 추가한다
var arr = [0, 1, 2, 3, 4, 5];
var result = arr.splice(2,3,6,7);
console.log(result);
>[2,3,4]
console.log(arr);
>[0,6,7,1,5]
결과를 확인해보면 2번index부터의 3개의 수를 반환받으며 삭제하고 그자리에 6,7이 삽입된 것을 확인할 수 있다.
slice는 배열의 특정index값만을 원할때 사용하고 splice는 특정index부터의 값을 얻고 그부분을 배열에서 제거하고 싶을때 사용하면 좋을것 같다.