Array.splice() - 배열에 값을 제거, 교체 또는 추가합니다.

의 기사 번호 13. 이 기사에서는 splice 배열 방법이 무엇인지 설명합니다.

접합 방법이란 무엇입니까?

배열의 splice 메서드는 항목을 제거하고 항목을 새 요소로 바꾸거나 배열에 새 항목을 추가할 수 있습니다.

이 메서드는 원래 배열을 수정합니다. 제거된 값의 배열을 반환합니다(제거된 값이 없으면 빈 배열).

스플라이스 방법의 구문

array.splice(start, deleteCount, ...itemsToAdd)

start 인수는 스플라이싱이 시작되는 인덱스를 지정합니다.
deleteCount 인수는 시작 위치에서 삭제할 항목 수를 지정합니다. 값 0은 아무것도 제거하지 않음을 의미합니다.

선택 사항인 itemsToAdd 인수는 시작 위치에서 배열에 추가될 항목을 지정합니다(항목이 제거되었는지 여부).

접합 방법 사용 방법

배열에서 항목을 제거하려면

splice 메서드를 사용하여 배열에서 항목을 제거하려면 start 및 deleteCount 인수만 지정하십시오.

const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 2)

console.log(array)
// [1, 4, 5]

console.log(removedItems)
// [2, 3]

시작 위치splice인 인덱스 1에서 2와 3인 2개의 항목(두 번째 인수)을 삭제합니다. 제거된 값은 배열로 반환되고 원래 배열은 값으로 수정됩니다. 제거됩니다.

배열의 항목을 바꾸려면

배열의 항목을 새 항목으로 바꾸려면 start , deleteCount(바꿀 항목 수 지정) 및 바꿀 항목 목록을 지정합니다.

const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 2, 10, 11, 12)

console.log(array)
// [1, 10, 11, 12, 4, 5]

console.log(removedItems)
// [2, 3]

수정된 배열에서 볼 수 있듯이 시작 위치인 인덱스 1부터 두 항목이 제거되고 세 항목으로 대체됩니다.

배열에 항목을 추가하려면

splice를 사용하여 배열에 항목을 추가하려면 start , deleteCount 인수(0)를 지정하고 추가할 항목 목록도 지정합니다.

const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 0, 1000, 2000)

console.log(array)
// [1, 1000, 2000, 2, 3, 4, 5]

console.log(removedItems)
// []

시작 위치 1에서는 항목이 제거되지 않으며 추가된 값 1000 및 2000이 해당 위치의 배열에 추가됩니다.
removedItems는 아무것도 제거되지 않은 빈 배열입니다.

마무리

배열의 splice 메서드를 사용하여 항목을 제거, 교체 및 배열에 추가할 수 있습니다. 그러나 원래 배열을 수정하므로 사용 시 주의하십시오.

코드의 다른 부분에서 사용할 배열인 경우 나중에 앱에서 버그를 방지하기 위해 접합하기 전에 배열을 복제(예: Spread operator 사용)하는 것이 좋습니다.

const array = [1, 2, 3, 4, 5]

const toBeModified = [...array]

const removedItems = toBeModified.splice(1, 0, 1000)

console.log(array)
// [ 1, 2, 3, 4, 5 ]

console.log(toBeModified)
// [1, 1000, 2, 3, 4, 5]

console.log(removedItems)
// []

// use the original array later on in the code