Javascript: .slice와 .splice의 차이점

Javascript를 처음 배우기 시작했을 때 가장 먼저 .slice와 .splice를 사용하는 시기와 방법에 대해 끊임없이 고민했습니다. 나는 둘 사이의 차이점에 대한 블로그를 작성하는 것이 언젠가는 같은 배를 타게 될 다른 사람들에게 유용할 것이라고 생각했습니다. 들어 오세요..



일부분

이 메서드는 값이 원래 배열의 조각(슬라이스)인 새 배열을 반환합니다. 원래 배열을 유지하려면 이 방법을 사용하십시오. 슬라이스 메소드는 반환할 배열의 조각/조각을 결정하는 두 개의 매개변수를 사용할 수 있습니다(둘 다 0부터 시작하여 배열의 첫 번째 요소가 0이 됨을 의미).

시작 색인(선택 사항)

종료 색인(선택사항)

참고: 시작 인덱스와 종료 인덱스를 사용할 때 종료 인덱스의 값은 포함되지 않습니다. 시작 인덱스만 사용하는 경우 시작 인덱스부터 배열 끝까지 모든 값을 포함합니다. 이것은 아래 예에서 더 이해가 될 것입니다 👇

시작 색인만 사용:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

console.log(colors.slice(1)) // ["💛", "💚", "💙", "💜", "🖤"]
console.log(colors.slice(4)) // ["💜", "🖤"]
console.log(colors.slice(14)) // []
console.log(colors.slice()) // ["🧡","💛","💚","💙","💜","🖤"]

// Note: using a negative value (x) here will return the last x values of the array
// It will include all values even if x is greater than length of the array 
console.log(colors.slice(-4)) // ["💚", "💙", "💜", "🖤"]
console.log(colors.slice(-2)) // ["💜", "🖤"]
console.log(colors.slice(-14)) // ["🧡","💛","💚","💙","💜","🖤"]

// Rembmer, this will not modify/change the original array.. so:
console.log(colors) //  ["🧡","💛","💚","💙","💜","🖤"]

시작 및 끝 인덱스 사용:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

console.log(colors.slice(1,5)) // ["💛", "💚", "💙", "💜"]
console.log(colors.slice(2,4)) // ["💚", "💙"]

시작 인덱스만 사용할 때와 마찬가지로 음수 값을 종료 인덱스로 사용할 수도 있습니다. 끝 인덱스로 음수 값을 사용할 때 본질적으로 "[시작 인덱스]에서 시작하는 원래 배열의 조각을 가져오고 마지막 [x] 값을 제외한 배열의 모든 값을 포함합니다"라고 말하는 것입니다. x는 음수 끝입니다. 인덱스 값.

끝 인덱스 값이 시작 인덱스에서 남은 배열 길이보다 크면 반환 값은 빈 배열이 됩니다.

아래의 코드 스니펫은 이것이 어떻게 작동하는지에 대한 아이디어를 제공할 것입니다 👇

시작 색인과 (음수) 종료 색인 사용:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

// "Take a slice of the original array starting at 2 and include all values EXCEPT...:

// ".. the last (-1) value"
console.log(colors.slice(2,-1)) // ["💚", "💙", "💜"]

// ".. last two (-2) values"
console.log(colors.slice(2,-2)) // ["💚", "💙"]

// ".. the last three (-3) values"
console.log(colors.slice(2,-3)) // ["💚"]

// ".. the last four (-4) values"
console.log(colors.slice(2,-4)) // []

// Since our starting index is 2, we are left with 3 additional values
// After we surpass that value of (negative) 3, we will start to receive an empty array

접착

이 메서드는 기존 값을 제거 및/또는 교체하거나 새 요소를 추가하여 호출되는 배열을 수정/변경합니다. .slice처럼 새 배열을 만들지는 않습니다. .splice 메서드 자체는 제거된 항목의 배열을 반환하거나 항목이 교체/제거되지 않은 경우 빈 배열을 반환합니다. 다음 매개변수를 .splice에 전달할 수 있습니다.

시작 색인

삭제할 항목 수(선택 사항)

시작 색인에서 추가할 item1(선택 사항)

항목 1 다음에 추가할 항목 2(선택 사항)

등등.. (선택 사항)

시작 색인만 사용:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

// Will remove all colors that include / come after the starting index
console.log(colors.splice(1)) // ["💛", "💚", "💙", "💜", "🖤"]

// Colors will now only include the orange heart since it was before the starting index of 1
console.log(colors) // ["🧡"]

삭제 횟수가 있는 시작 인덱스 사용:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

// Starting from index 1, remove 1 item
console.log(colors.splice(1,1)) // ["💛"]
console.log(colors) // ["🧡", "💚", "💙", "💜", "🖤"]

// Starting from index 2, remove 2 items
console.log(colors.splice(2,2) // ["💙", "💜"]
console.log(colors) // ["🧡", "💚", "🖤"]

시작 인덱스, 삭제 횟수, 시작 인덱스부터 추가/교체할 항목 사용:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

// Starting from index 0, delete 0 items, and add "hi" starting from index 0
console.log(colors.splice(0,0,"hi") // []
console.log(colors) // ["hi","🧡","💛","💚","💙","💜","🖤"]

// Starting from index 6, delete 1 item, and add "bye" starting from index 6
console.log(colors.splice(6,1,"bye")) // ["🖤"]
console.log(colors) // ["hi","🧡","💛","💚","💙","💜","bye"]

// Starting from index 2, delete 3 items, & add "bing","bang","boom" starting from index 3
console.log(colors.splice(2,3,"bing","bang","boom")) // ["💛", "💚", "💙"]
console.log(colors) // ["hi","🧡","bing","bang","boom","💜","bye"]

TLDR

원래 배열을 수정하지 않으려면 .slice를 사용하고 어딘가에 조각(조각)을 사용하십시오

.

원래 배열을 수정하려면 .splice를 사용하십시오

.

항상 그렇듯이 자세한 내용은 MDN을 참조하세요.
.슬라이스: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
.스플라이스: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

질문, 피드백(좋은 것과 나쁜 것)이 필요하거나 연결/안녕하세요 👋에 대해 제 소셜에 자유롭게 연락하세요.