JavaScript에서 슬라이스 대 스플라이스 기억하기

Cristian Escobar에 Unsplash의 사진
slice 및 splice는 배열 작업을 위한 두 가지 편리한 JavaScript 메서드입니다. 소리가 너무 비슷해서 항상 헷갈려요. 그래서 차이점을 기억할 수 있도록 mnemonic을 만들었습니다.

이 블로그는 slice와 splice의 차이점과 기억하는 방법을 탐구합니다.

슬라이스 대 스플라이스 비교

다음은 slice 및 splice 배열 방법 간의 차이점에 대한 개요가 포함된 표입니다.


방법
돌연변이
인수
사용
반환 출력


일부분
돌연변이하지 않는다
시작, 끝
원본 배열의 얕은 복사본 만들기
복사된 배열을 반환

접착
돌연변이
시작, 개수 삭제, 교체할 항목 n개
원래 배열에서 추가 또는 제거
새 배열에서 제거된 요소를 반환합니다.

일부분()

slice 배열 메서드는 슬라이스 배열의 얕은 복사본을 만들고 복사된 배열을 반환합니다. 원래 배열을 변경하지 않습니다.

구문은 다음과 같습니다.

arr.slice(start, end)
// The returned copied array excludes the end index

다음은 작동 중인 slice입니다.

const arr = ['alex', 'justin', 'max', 'harper', 'mason']

arr.slice(2) // copy everything after and including the 2nd index, 'max'
// returns ['max', 'harper', 'mason']

arr.slice(2, 4) // copy everything after the second index up to the 3rd index
// returns ['max', 'harper']

arr.slice(2, 5) // copy everything after the second index up to the 4th index
// returns [ 'max', 'harper', 'mason' ]

console.log(arr) // arr is not mutated
// ['alex', 'justin', 'max', 'harper', 'mason']

MDN reference: Array.prototype.slice

slice 역시 문자열 방식입니다. 배열 방법과 유사하게 문자열에 대한 slice 방법도 문자열의 섹션을 슬라이스하여 반환합니다. 원래 문자열을 변경하지 않습니다.

다음은 문자열에 대한 작업slice입니다.

const str = 'Everything is not what it seems'
str.slice(3) // copy everything after and including the 3rd index, 'r'
// returns 'rything is not what it seems'

str.slice(-5) // copy elements from the last index to the left 5 indices
// returns 'seems'

str.slice(-17, -6) // copy specified elements based on the indices counting from the end of the string
// returns 'not what it'

console.log(str) // str is not mutated
// 'Everything is not what it seems'

MDN reference: String.prototype.slice

접착()

splice 원래 배열을 변경하고 제거된 요소를 새 배열로 반환합니다. 또한 선택적으로 지정된 수의 요소를 제거하거나 지정된 값을 가진 요소를 삽입합니다.

구문은 다음과 같습니다.

arr.splice(start, deleteCount [optional], newElem [optional], newElem [optional], ...)

다음은 몇 가지 다른 예에서 실행 중인 splice입니다.

Ex 1: 첫 번째 인덱스부터 모든 요소 제거

const arr = ['alex', 'justin', 'max', 'harper', 'mason']
arr.splice(1) // remove 'justin' and beyond. no elements are added
// returns ['justin', 'max', 'harper', 'mason']

console.log(arr) // arr is mutated
// ['alex']

Ex 2: 두 번째 인덱스부터 2개의 요소 제거

const arr = ['alex', 'justin', 'max', 'harper', 'mason']
arr.splice(2, 2) // remove 'max' and 'harper'. no elements are added
// returns ['max', 'harper']

console.log(arr) // arr is mutated
// ['alex', 'justin', 'mason']

Ex 3: 요소를 제거하지 않고 두 번째 인덱스에 1개 요소 삽입

const arr = ['alex', 'justin', 'max', 'harper', 'mason']

arr.splice(2, 0, 'juliet') // insert 'juliet' at 2nd index. no elements are removed
// returns []

console.log(arr) // arr is mutated
// ['alex', 'justin', 'juliet', 'max', 'harper', 'mason']

Ex 4: 3번째 인덱스에 2개의 요소를 삽입하고 1개의 요소를 삭제

const arr = ['alex', 'justin', 'max', 'harper', 'mason']

arr.splice(3, 1, 'juliet', 'zeke') // remove 'harper'. insert 'juliet' and 'zeke' at 3rd index
// returns ['harper']

console.log(arr) // arr is mutated
// ['alex', 'justin', 'max', 'juliet', 'zeke', 'mason']

MDN reference splice

슬라이스 대 스플라이스 기억하기

니모닉을 사용하여 slice와 splice의 차이점을 기억합니다. splice 에는 slice 에 비해 추가 문자 'p'가 있습니다. 추가 문자 때문에 원래 배열에서 추가하거나 제거하는 splice 의 사용에 추가 문자를 연결합니다. 그리고 splice는 원래 배열에 항목을 추가하고 제거할 수 있기 때문에 원래 배열도 변경합니다.

결론

그리고 우리는 그것을 가지고 있습니다! 이 블로그는 slice 와 splice 의 차이점에 대해 설명합니다. 이제 slice가 원래 배열의 얕은 복사본을 만드는 반면 splice는 원래 배열을 변경하고 선택적으로 요소를 추가하거나 제거한다는 것을 알고 있습니다. splice에 비해 slice에 추가 문자 'p'가 있어 splice가 원래 배열에서 변경되고 선택적으로 추가되거나 제거된다는 것을 기억하는 데 도움이 되는 편리한 니모닉을 갖추고 있습니다.

원래 내 blog에 게시되었습니다.