Javascript 배열 슬라이스 방법
16052 단어 javascriptbeginnerstypescriptwebdev
slice
메서드는 배열 일부의 단순 복사본을 반환합니다. a start
및 an end
두 개의 숫자가 필요합니다. 모든 배열에는 slice
메서드가 있습니다. 다음은 간단한 예입니다.let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let newArray = myArray.slice(2, 3);
console.log(newArray); // [ '🔑' ]
slice
메소드에는 start
및 end
의 두 가지 선택적 매개변수가 있습니다. 원하는 경우 둘 다 제공하거나 start
둘 다 제공할 수 있으므로 모두 유효합니다.let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3); // [ '🔑' ]
let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = arrayTwo.slice(2); // [ '🔑', '🔩' ]
let arrayThree = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayThreeSlice = arrayThree.slice(); // [ '⚡️', '🔎', '🔑', '🔩' ]
시작
새 배열에 포함할 첫 번째 항목의 인덱스입니다. 예를 들어
2
로 설정하면 slice
는 인덱스 2에서 새 배열 복사를 시작합니다. 음수를 사용하면 시퀀스 끝에서 오프셋을 나타냅니다. 예를 들어:let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(-2); // [ '🔑', '🔩' ]
let arrayOneSliceAgain = arrayOne.slice(-1); // [ '🔩' ]
끝
이것은 슬라이스 배열에서 제외할 첫 번째 요소입니다. 다소 혼란스럽습니다.
end
가 포함할 마지막 항목을 나타낼 것으로 예상할 수 있지만 대신 제외할 첫 번째 항목입니다. slice
를 사용하는 경우 명심하십시오! 이 인수를 생략하면 slice
메서드는 다음 예제와 같이 단순히 배열의 끝까지 계속됩니다.let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = myArray.slice(2); // [ '🔑', '🔩' ]
배열 길이보다 큰 값을 사용하면
slice
배열 끝까지만 계속됩니다. 음수 값을 사용하면 배열 끝에서 오프셋을 나타냅니다. 예를 들어 (2, -1)
는 처음부터 2가 되고 배열의 끝에서 -1이 됩니다.let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, -1); // [ '🔑' ]
let arrayOneSliceAgain = arrayOne.slice(1, -1); // [ '🔎', '🔑' ]
슬라이스를 사용하여 배열 사본 만들기
슬라이스는 원래 배열을 변경하지 않습니다. 대신 새 얕은 복사본을 만듭니다. 따라서 기존 배열에는 계속해서 동일한 값이 포함됩니다.
let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);
console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '🔑' ]
slice
는 배열의 얕은 복사본을 만들기 때문에 때때로 배열 데이터를 복제하고 복사본을 만드는 데 사용되기도 합니다. 예를 들어, 비어 있는slice
함수는 메모리에 새 배열을 생성하므로 메모리에 동일한 참조가 있는 동일한 배열의 두 복사본을 가질 수 있습니다.let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice();
arrayOneSlice[2] = '⚡️'
console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '⚡️', '🔎', '⚡️', '🔩' ]
이는 일부 시나리오에서 유용할 수 있습니다. 그러나
slice
는 배열의 단순 복사본만 만듭니다. 즉, 배열에 개체가 있으면 상황이 약간 혼란스러워집니다. 다음 배열을 고려하십시오.let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨💻', '😄', '🐔' ]
이 배열은 그 안에 개체를 포함합니다. 이 배열의 슬라이스 복사본을 만든 다음 업데이트
items
해 보겠습니다.let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨💻', '😄', '🐔' ]
let arrayOneSlice = arrayOne.slice(0, 2);
arrayOneSlice[0].items = [ '🔎' ];
arrayOneSlice[1] = '🔎';
console.log(arrayOne); // [ { items: [ '🔎' ]}, '👨💻', '😄', '🐔' ]
console.log(arrayOneSlice); // [ { items: [ '🔎' ]}, '🔎' ]
무엇을 기다립니다? 우리는
arrayOneSlice
의 items
개체를 변경했지만 arrayOne
및 arrayOneSlice
모두에서 변경되었습니다! 한편, arrayOneSlice[1]
는 arrayOneSlice
만 변경되었습니다! 또 다른 Javascript quirk에 오신 것을 환영합니다. 첫 번째 예에서 arrayOneSlice[0].items
표기법을 사용하여 Javascript는 이를 얕은 복사본 내의 기존 요소를 업데이트하는 것으로 해석하므로 원본에 영향을 미칩니다. 그러나 다소 혼란스럽게도 Javascript는 arrayOneSlice[1]
표기법을 사용하여 이를 얕은 복사본 자체의 [1]
위치에 새 값을 넣는 것으로 해석합니다.즉, 간단한 배열로 작업할 때
slice
로 복사본을 만드는 것처럼 보일 수 있지만 더 복잡한 객체에서 사용할 때는 이것이 유지되지 않습니다. 이 작은 퀴즈를 알면 언젠가는 많은 시간을 절약할 수 있을 것입니다.결론
Javascript 슬라이스 방법은 원래 배열 데이터의 하위 집합을 사용하여 배열의 새 얕은 복사본을 만드는 데 유용합니다. 또한 독립적으로 업데이트할 수 있는 복제본을 만드는 데 제한된 방식으로 사용할 수도 있습니다. Javascript 슬라이스 복사본은 여전히 원본과 동일한 참조를 메모리에 가지고 있으므로 조작할 때 알면 유용합니다.
이 가이드가 도움이 되었기를 바랍니다. For more Javascript, check out my other articles here .
Reference
이 문제에 관하여(Javascript 배열 슬라이스 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/smpnjn/javascript-array-slice-method-22kf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)