Javascript Slice 方法及其範例

什麼是 JavaScript 陣列切片？

Array.prototype.slice 是一個 JS Array 方法，用於從現有數組中提取連續的子數組或「切片」。

JavaScript 切片可以接受兩個參數：切片的開始和結束指示符－兩者都是可選的。也可以在沒有任何參數的情況下呼叫它。因此，它具有以下呼叫簽名：

// 

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

如果我想對數組進行切片以獲取其中的一部分，實際上有一個用於 Javascript 的內建函數 slice 。開箱即用，它將克隆原始數組。

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

結果指向新的記憶體位址，而不是原始陣列。如果您想將結果與其他函數連結起來，這非常有用。真正的用法是當您向切片提供一些輸入時。

開始索引

切片最多可以接受兩個輸入參數。第一個稱為起始索引，這將告訴它應該從哪裡開始切片。

[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

預設情況下，它將切片直到數組末尾。起始索引的有趣之處在於，不僅可以使用零或正數，還可以使用負數。

[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 語句是如何編寫的，或者只需記住獲取最後一個元素索引，然後加一即可。另一種思考方式是結束索引是開放式的，[start, end)。

與開始索引一樣，結束索引也可以為負數。

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 切片：真實範例

切片數組的一個典型範例涉及從來源數組產生連續部分。例如，前三個項目、後三個項目以及從某個索引到另一個索引的一些項目。

如下例：

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 slice 傳遞任何參數，我們將獲得包含所有項目的來源數組的淺表副本：

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"]

如果我們傳入的 start 值大於 end 值，我們會得到一個空數組：

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 Slice 方法及其範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！