자바스크립트 배열 슬라이스 방법

배열의 slice 메서드는 배열의 일부에 대한 얕은 복사본을 반환합니다. 두 개의 숫자 a start 와 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 변경되었습니다! 또 다른 자바스크립트 문제에 오신 것을 환영합니다. 첫 번째 예에서 arrayOneSlice[0].items 표기법을 사용하는 Javascript는 이를 얕은 사본 내의 기존 요소를 업데이트하는 것으로 해석하므로 원본에 영향을 줍니다. 그러나 다소 혼란스럽게도 arrayOneSlice[1] 표기법을 사용하여 Javascript는 이것을 얕은 사본 자체의 [1] 위치에 새 값을 넣는 것으로 해석합니다.

즉, 간단한 배열로 작업할 때 slice를 사용하여 복사하는 것처럼 보일 수 있지만 더 복잡한 개체에서 사용할 때는 유지되지 않습니다. 이 작은 퀴즈를 알면 언젠가는 많은 시간을 절약할 수 있습니다.

결론

Javascript 슬라이스 방법은 원래 배열 데이터의 하위 집합으로 배열의 얕은 복사본을 새로 만드는 데 유용합니다. 또한 독립적으로 업데이트할 수 있는 복제본을 만들기 위해 제한된 방식으로 사용할 수도 있습니다. Javascript 슬라이스 복사본은 여전히 ​​원본과 동일한 참조를 메모리에 갖고 있으므로 이를 조작할 때 알아두면 유용합니다.

이 가이드를 즐겼기를 바랍니다. For more Javascript, check out my other articles here .