slice()와 splice() 차이

slice() 함수

slice()는 배열로 부터 특정 범위를 복사한 값을들 감고 있는 새로운 배열을 만드는데 사용

첫번째 인자로 시작 인덱스

두번째 인자로 종료 인데스(종료인덱스 전까지 잘라냄)

nums = Array(20).fill().map((_, i) => i)
< [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

nums.slice(5, 10) // [5, 6, 7, 8, 9]

nums.slice(10) // [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

nums // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

첫번째 인자로 넘어온 시작 인덱스가 가리키는 값은 포함하지만

두번째 인자로 넘어온 종료 인덱스가 가리키는 값은 포함하지 않음

 

두번째 인자를 안넘기면 시작부터 끝까지

 

splice()와 다른점은 잘라내어도 원본 배열은 그대로 유지(원본은 바뀌지 않음)

 

splice()함수splice()는 배열로 부터 특정 범위를 삭제하거나, 새로운 값을 추가 또는 기존 값을 대체 할 수 있음첫번째 인자로 시작 인덱스두번째 인자로 몇개의 값을 삭제 할지세번째 인자부터는 추가할 갓을 가면 인자도 넘겨 받고, 삭제된 값을 담고 있는 배열 반환

nums = Array(20).fill().map((_, i) => i)
< [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

nums.splice(5, 3) // [5, 6, 7]
nums // [0, 1, 2, 3, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

nums.splice(5, 0, -5, -6, -7) // []
nums // [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

nums.splice(10, 2, -10, -11) // [10, 11]
nums // [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, -10, -11, 12, 13, 14, 15, 16, 17, 18, 19]

nums.splice(15) // [15, 16, 17, 18, 19]
nums // [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, -10, -11, 12, 13, 14]

인덱스 5가 가르키는 값부터 3개의 값 삭제

 

인덱스 5가 기리키는 값부터 아무 값도 삭제하지 않고, -5, -6, -7을 추가(이전 삭제된 곳에 -5,-6,-7이 들어감)

 

인덱스 10이 가리키는 값부터 2개의 값을 -10, -11로 대체

 

첫번째 인자만 넘기면 해당 인덱스부터 끝까지 삭제

 

slice()와 다른점은 잘라내는 것은 동일하나 splice는 원본에도 영향을 주어 삭제까지 시킨다는 점

또한 두번째 인자로 slice는 끝값의 인덱스를 받지면

splice는 시작부터 몇개의 값을 삭제할지 갯수를 받음

 

 

splice()응용배열에서 특정 값의 요소를 삭제

var arr = [1, 2, 3, 4, 5, 5, 6, 7, 8, 5, 9, 0];

for(var i = 0; i < arr.length; i++){ 
  if (arr[i] === 3||arr[i] === 6 ) { 
    arr.splice(i, 1); 
    i--; 
  }
}

console.log(arr);
// [1, 2, 4, 5, 7, 8, 9, 0];

i--; 코드를 작성한 이유는 splice() 함수가 실행 후 배열의 요소가 즉시 삭제되고 배열의 길이가 변경되기 때문