JavaScript 배열 메서드 - 슬라이스 및 스플라이스

오늘 저는 매우 비슷하게 들리는 두 가지 JS 배열 방법에 대해 쓸 것이며 배열과 비슷한 작업을 수행합니다! 시작했을 때 어느 것이 어레이에 대해 무엇을 하는지 혼란스러웠습니다. 요령을 터득한 것 같습니다! 😁 어쩌면... 내가 설명할 수 있는지 봅시다.

Array.prototype.slice()

이름에서 이 메서드가 배열에 대해 수행하는 작업을 추측할 수 있습니다. .slice() 메서드를 사용하여 배열의 일부를 선택하고 새 배열로 반환할 수 있습니다. 이 방법을 사용하여 어레이shallow copy를 생성할 수도 있습니다. 단순 복사는 배열의 항목이 객체인 경우 .slice()에서 해당 객체에 대한 참조를 복사하고 변경 사항이 원래 값에 영향을 줄 수 있음을 의미합니다. 그것에 대해 더 알고 싶다면 기사를 링크했습니다.
.slice() 메서드는 배열의 인덱스를 나타내는 최대 두 개의 정수 인수를 사용할 수 있습니다. 첫 번째 인수는 슬라이스를 시작하려는 위치를 메서드에 알려주고 두 번째 인수는 중지하려는 시기를 메서드에 알려줍니다(메서드는 끝 인덱스에 항목을 포함하지 않음).

예 1 -

const first10digitsOfPI = [3,1,4,1,5,9,2,6,5,3];


const first3digitsOfPI = first10digitsOfPI.slice(0, 3);
console.log(first3digitsOfPI); // [3,1,4]


const copy3digitsPI = first3digitsOfPI.slice();
console.log(copy3digitsPI); // [3,1,4]


const decimalsOfPI = first10digitsOfPI.slice(1);
console.log(decimalsOfPI); // [1,4,1,5,9,2,6,5,3]

console.log(first10digitsOfPI); // [3,1,4,1,5,9,2,6,5,3]

위의 예에서 인수 없이 .slice()를 호출하면 배열의 복사본(얕은 복사본)이 생성되는 것을 볼 수 있습니다. 하나의 인수를 사용하는 경우 메서드는 해당 위치 인덱스에서 끝까지 배열을 자르기 시작합니다. 그리고 두 개의 인수를 사용하는 경우 슬라이싱은 첫 번째 인수에서 시작하여 두 번째 인수는 포함하지 않습니다.

첫 번째 인수가 배열의 길이보다 크면 빈 배열이 반환되고 두 번째 인수가 길이보다 크면 .slice() 메서드가 배열의 끝까지 올라갑니다.

질문: 인수가 음수이면 어떻게 됩니까? 🤔...의견을 댓글로 알려주세요.

Array.prototype.splice()

.splice()는 메서드를 호출하는 배열을 변경하고 배열에서 제거된 요소를 반환합니다. 특정 인덱스에서 배열에 값을 추가하는 데 사용할 수도 있습니다. 이 메서드는 많은 인수를 사용할 수 있지만 첫 번째 인수는 접합을 시작할 위치 인덱스를 나타내고 두 번째 인덱스는 제거할 요소 수를 나타냅니다. 이후의 모든 추가 인수는 스플라이싱 시작 시 배열에 추가되는 값이 됩니다. 😮‍💨 이해를 돕기 위해 예를 들어보겠습니다.

예 2 -

let programLang = ["HTML", "CSS", "Javascript", "Python", "Java", "GO","SQL"];

const removedLang = programLang.splice(0);
console.log(programLang); // []
console.log(removedLang);
// ["HTML","CSS","Javascript","Python","Java","GO","SQL"] 

programLang = removedLang.slice();

const removeFirstThree = programLang.splice(0,3);
console.log(removeFirstThree); // ["HTML","CSS","Javascript"]
console.log(programLang); // ["Python","Java","GO","SQL"]

programLang.splice(1,1,"C++", "TS");
console.log(programLang); // ["Python","C++","TS","GO","SQL"]

예제에서 첫 번째 스플라이스는 인덱스 0부터 배열 끝까지 모든 요소를 ​​제거했습니다. 이는 두 번째 인수가 제공되지 않은 경우에 발생합니다. 그런 다음 .slice()를 사용하여 어레이를 원래 상태로 다시 복사했습니다. 그런 다음 위치 인덱스 0부터 시작하여 3개의 요소를 제거합니다. 마지막으로 마지막 스플라이스는 위치 인덱스 1에서 시작하여 1개 항목을 제거하고 2개의 새 요소를 배열에 추가했습니다.

요약

요약하면 원래 배열을 변경하려면 .splice() 를 사용해야 하지만 원래 배열을 동일하게 유지하려면 .slice() 를 사용해야 합니다. 물론 필요에 따라 두 가지를 결합할 수도 있습니다. .slice() 지정된 인덱스에서 지정된 인덱스까지 배열의 하위 집합을 가져와 새 배열로 반환합니다. 그러나 .splice()는 제자리에서 변경되며 지정된 인덱스에서 시작할 때 배열에서 요소를 추가하거나 제거할 수 있습니다.

그것이 .slice() 와 .splice() 가 무엇인지 명확하게 해주기를 바랍니다.

읽어주셔서 감사하고, 제가 개념을 잘못 이해했거나 글이 불명확한 부분이 있다면 댓글로 남겨주세요. 👍