예제가 포함된 Javascript 슬라이스 방법

JavaScript 배열 슬라이스란 무엇입니까?

Array.prototype.slice는 기존 배열에서 인접한 하위 배열 또는 "슬라이스"를 추출하는 데 사용되는 JS 배열 메서드입니다.

JavaScript 슬라이스는 슬라이스의 시작 및 끝 표시라는 두 가지 인수를 사용할 수 있으며 둘 다 선택 사항입니다. 인수 없이 호출할 수도 있습니다. 따라서 다음과 같은 호출 서명이 있습니다.

// 

slice();
slice(start);
slice(start, end);

배열을 분할하여 일부를 가져오려면 실제로 Javascript용 함수 슬라이스가 내장되어 있습니다. 상자에서 꺼내자마자 원래 배열이 복제됩니다.

[1,2,3].slice() // [1,2,3]

결과는 원래 배열이 아닌 새 메모리 주소를 가리킵니다. 이는 결과를 다른 기능과 연결하려는 경우 매우 유용할 수 있습니다. 실제 사용법은 슬라이스에 일부 입력을 제공할 때입니다.

인덱스 시작

슬라이스에는 최대 2개의 입력 매개변수를 사용할 수 있습니다. 첫 번째 인덱스는 시작 인덱스라고 하며, 이는 슬라이스를 시작할 위치를 알려줍니다.

[1,2,3].slice(0) // returns [1,2,3]; Original array unmodified
[1,2,3].slice(1) // returns [2,3]; Original array unmodified
[1,2,3].slice(2) // returns [3]; Original array unmodified
[1,2,3].slice(3) // returns []; Original array unmodified

기본적으로 배열 끝까지 슬라이스됩니다. 시작 인덱스의 흥미로운 점은 0이나 양수뿐만 아니라 음수도 사용할 수 있다는 점입니다.

[1,2,3].slice(-1) // [3]
[1,2,3].slice(-2) // [2,3]
[1,2,3].slice(-3) // [1,2,3]

음수일 경우 n 끝부터 세는 인덱스를 의미합니다. 예를 들어, -1은 배열의 마지막 요소를 참조하고, -2는 마지막 두 번째 요소를 참조하는 식입니다. 마지막 요소 이후에는 요소가 없기 때문에 -0이 없다는 점에 유의하세요. 이는 상황에 따라 매우 명백할 수도 있고 혼란스러울 수도 있습니다.

종료 인덱스

슬라이스에는 끝 인덱스라는 두 번째 매개변수가 포함될 수 있습니다.

[1,2,3].slice(0,3) // [1,2,3]
[1,2,3].slice(0,2) // [1,2]
[1,2,3].slice(0,1) // [1]

범위 인덱스라고도 하는 끝 인덱스는 요소 인덱스 + 1을 가리킵니다. 무슨 뜻인가요? 이를 설명하려면 for 문과 연관시키면 상대적으로 더 쉬울 것입니다.

for (let i = 0; i < n; i++) {}

변수 i는 시작 인덱스인 0에서 시작합니다. 끝 인덱스인 n에서 끝납니다. 끝 인덱스는 n - 1이기 때문에 배열의 마지막 요소가 아닙니다. 그러나 끝 인덱스의 경우 n은 마지막 요소가 포함된 "끝"을 나타냅니다. 끝 인덱스를 처음 사용하는 경우 for 문이 어떻게 작성되었는지 기억하거나 마지막 요소 인덱스를 가져온 다음 거기에 1을 더하는 것을 기억하세요. 또 다른 생각으로는 끝 인덱스가 개방형, [시작, 끝)이라고 생각하시면 됩니다.

시작 인덱스와 마찬가지로 종료 인덱스도 음수일 수 있습니다.

1,2,3].slice(0,-1) // [1,2]
[1,2,3].slice(0,-2) // [1]

여기서 좀 더 주목해 보세요. -1은 마지막 요소를 의미하므로 두 번째 매개변수로 사용되면 앞서 설명한 대로 마지막 요소가 제외된다는 의미입니다.

멋지지만 마지막 요소를 포함하고 싶다면 어떻게 해야 할까요?

[1,2,3].slice(0) // [1,2,3]

예, 단일 매개변수 입력을 사용하면 됩니다.

JavaScript 슬라이스 사용 방법: 실제 예

배열 분할의 일반적인 예는 소스 배열에서 연속 섹션을 생성하는 것입니다. 예를 들어 처음 3개 항목, 마지막 3개 항목 및 특정 인덱스에서 다른 인덱스까지의 일부 항목이 있습니다.

아래 예시와 같습니다.

const elements = [
  "Please",
  "Send",
  "Cats",
  "Monkeys",
  "And",
  "Zebras",
  "In",
  "Large",
  "Cages",
  "Make",
  "Sure",
  "Padlocked",
];

const firstThree = elements.slice(0, 3); // ["Please", "Send", "Cats"]

const lastThree = elements.slice(-3, elements.length); // ["Make", "Sure", "Padlocked"]

const fromThirdToFifth = elements.slice(2, 5); // ["Cats", "Monkeys", "And"]

JavaScript 슬라이스에 인수를 전달하지 않으면 모든 항목이 포함된 소스 배열의 얕은 복사본을 얻습니다.

const allCopied = elements.slice();

// (12) ["Please", "Send", "Cats", "Monkeys", "And", "Zebras", "In", "Large", "Cages", "Make", "Sure", "Padlocked"]

효과적으로 [...요소]입니다.

두 번째 인수가 없는 JavaScript 배열 슬라이스 방법

두 번째 인수를 전달하지 않으면 추출된 JavaScript 배열 슬라이스가 마지막 요소로 확장됩니다.

const fromThird = elements.slice(2);
// (10) ["Cats", "Monkeys", "And", "Zebras", "In", "Large", "Cages", "Make", "Sure", "Padlocked"]

const lastThree = elements.slice(-3, elements.length);
// (3) ["Make", "Sure", "Padlocked"]

const lastThreeWithNoSecArg = elements.slice(-3);
// (3) ["Make", "Sure", "Padlocked"]

음수 오프셋이 있는 JavaScript Array.prototype.slice

또한 위에서 음수를 인수로 전달할 수 있다는 점에 유의하세요. 인수의 음수 값은 마지막 항목에서 거꾸로 계산된 오프셋 위치를 나타냅니다. 두 인수 모두에 대해 이 작업을 수행할 수 있습니다.

const latestTwoBeforeLast = elements.slice(-3, -1);
// (2) ["Make", "Sure"]

끝보다 시작에 더 큰 값을 전달하면 빈 배열이 생성됩니다.

const somewhereWeDontKnow = elements.slice(5, 2); // []

이는 항상 덜 양수인 인덱스에서 슬라이싱을 시작해야 함을 나타냅니다.

Array.prototype.slice: 시작 위치가 배열 길이보다 큼

마찬가지로 배열의 길이보다 더 큰 start 값을 전달하면 빈 배열이 생성됩니다.

const somewhereInOuterSpace = elements.slice(15, 2); // []

희소 배열과 함께 JS 슬라이스 사용

대상 슬라이스에 희소 항목이 있는 경우 해당 항목도 복사됩니다.

const elements = [
  "Please",
  "Send",
  ,
  "Cats",
  ,
  "Monkeys",
  "And",
  "Zebras",
  "In",
  "Large",
  "Cages",
  "Make",
  "Sure",
  "Padlocked",
];

const sparseItems = elements.slice(0, 6);
// (6) [ 'Please', 'Send', <1 empty item>, 'Cats', <1 empty item>, 'Monkeys' ]

Array.prototype.slice: 인수 목록에서 배열 생성

이 섹션에서는 슬라이싱에 대해 좀 더 자세히 살펴보겠습니다. 우리는 함수에 전달된 인수 목록에서 배열을 구성하기 위해 Array.prototype.slice를 사용하여 두 가지 흥미로운 방법을 개발했습니다.

첫 번째:

const createArray = (...args) => Array.prototype.slice.call(args);
const array = createArray(1, 2, 3, 4);
// (4) [1, 2, 3, 4]

쉬웠어요.

이를 수행하는 다음 단계 방법은 가능한 가장 지저분한 방법입니다.

const boundSlice = Function.prototype.call.bind(Array.prototype.slice);

const createArray = (...args) => boundSlice(args);

const array = createArray(1, 2, 3, 4);
// (4) [1, 2, 3, 4]

Slicing a JavaScript String

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";

const firstThreeChars = mnemonic.slice(0, 3); // "Ple"
const lastThreeChars = mnemonic.slice(-3, mnemonic.length); // "ked"
const fromThirdToFifthChars = mnemonic.slice(2, 5); // "eas"

Again, both arguments represent zero-based index numbers or offset values. Here too, the first argument -- 0 in the firstThree assignment -- stands for the starting index or offset in the source array. And the second argument (3) denotes the index or offset before which extraction should stop.

JavaScript String Slice Nuances

Using JavaScript String slice With No Arguments

Similar to Array slice, if we don't pass any argument to String slice(), the whole string is copied over:

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";
const memorizedMnemonic = mnemonic.slice();

// "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked"

JavaScript String slice with Negative Offsets

Similar to Array.prototype.slice, negative values for start and end represent offset positions from the end of the array:

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";

const lastThreeChars = mnemonic.slice(-3); // "ked"
const latestTwoCharsBeforeLast = mnemonic.slice(-3, -1);  // "ke"

Summary

In this post, we expounded the slice() method in JavaScript. We saw that JavaScript implements slice() in two flavors: one for Arrays with Array.prototype.slice and one for Strings with String.prototype.slice. We found out through examples that both methods produce a copy of the source object and they are used to extract a target contiguous slice from it.

We covered a couple of examples of how function composition and context binding with Function.prototype.call and Function.prototype.bind allows us to define custom functions using Array.prototype.slice to help us generate arrays from a list of arguments.

We also saw that String.prototype.slice is an identical implementation of Array.prototype.slice that removes the overhead of converting a string to an array of characters.

위 내용은 예제가 포함된 Javascript 슬라이스 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!