Javascript-Slice-Methode mit Beispiel

Was ist ein JavaScript-Array-Slice?

Array.prototype.slice ist eine JS-Array-Methode, die verwendet wird, um ein zusammenhängendes Subarray oder „Slice“ aus einem vorhandenen Array zu extrahieren.

JavaScript-Slice kann zwei Argumente annehmen: den Start- und den Endindikator des Slice – beide sind optional. Es kann auch ohne Argument aufgerufen werden. Es hat also die folgenden Rufsignaturen:

// 

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

Wenn ich das Array segmentieren möchte, um einen Teil davon zu übernehmen, gibt es tatsächlich eine integrierte Funktion Slice für Javascript. Direkt nach dem Auspacken wird das ursprüngliche Array geklont.

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

Das Ergebnis zeigt auf eine neue Speicheradresse, nicht auf das ursprüngliche Array. Dies kann sehr nützlich sein, wenn Sie das Ergebnis mit anderen Funktionen verketten möchten. Die eigentliche Verwendung besteht darin, dass Sie dem Slice Eingaben hinzufügen.

Index starten

Der Slice kann bis zu zwei Eingabeparameter annehmen. Der erste wird als Startindex bezeichnet und gibt an, wo das Slice beginnen soll.

[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

Standardmäßig wird bis zum Ende des Arrays geschnitten. Das Interessante am Startindex ist, dass Sie nicht nur eine Null oder eine positive Zahl verwenden können, sondern auch eine negative Zahl.

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

Wenn es sich um eine negative Zahl handelt, bezieht sie sich auf einen Index, der vom Ende n an zählt. Beispielsweise bezieht sich -1 auf das letzte Element des Arrays, -2 auf das vorletzte Element usw. Beachten Sie, dass es kein -0 gibt, da es kein Element hinter dem letzten Element gibt. Dies kann je nach Situation sehr offensichtlich oder verwirrend sein.

Endindex

Der Slice kann einen zweiten Parameter namens Endindex annehmen.

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

Der Endindex, auch Bereichsindex genannt, zeigt auf den Elementindex + 1. Was bedeutet das? Um dies zu erklären, wäre es relativ einfacher, wenn wir uns auf die for-Anweisung beziehen könnten:

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

Die Variable i beginnt bei 0, dem Startindex; und endet bei n, dem Endindex. Der Endindex ist nicht das letzte Element des Arrays, denn das wäre n - 1 . Aber wenn es um den Endindex geht, steht n für das „Ende“, einschließlich des letzten Elements. Wenn Sie den Endindex zum ersten Mal verwenden, denken Sie einfach daran, wie die for-Anweisung geschrieben wird, oder denken Sie einfach daran, den Index des letzten Elements zu nehmen und dann eins hinzuzufügen. Eine andere Möglichkeit, es sich vorzustellen, ist, dass der Endindex ein offenes Ende hat, [Start, Ende).

Wie der Startindex kann auch der Endindex negativ sein.

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

Schenken Sie hier etwas mehr Aufmerksamkeit. -1 bezieht sich auf das letzte Element. Wenn es also als zweiter Parameter verwendet wird, bedeutet dies, dass das letzte Element ausgeschlossen wird, wie wir erklärt haben, mit offenem Ende.

Kool, aber was ist, wenn ich das letzte Element einschließen möchte?

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

Ja, verwenden Sie einfach die Einzelparametereingabe.

So verwenden Sie ein JavaScript-Slice: Echtes Beispiel

Ein typisches Beispiel für das Slicing eines Arrays besteht darin, einen zusammenhängenden Abschnitt aus einem Quellarray zu erstellen. Zum Beispiel die ersten drei Elemente, die letzten drei Elemente und einige Elemente, die von einem bestimmten Index bis zu einem anderen Index reichen.

Wie in den folgenden Beispielen gezeigt:

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

Wenn wir kein Argument an den JavaScript-Slice übergeben, erhalten wir eine flache Kopie des Quellarrays mit allen Elementen:

const allCopied = elements.slice();

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

Es sind effektiv [...Elemente].

JavaScript-Array-Slice-Methode ohne zweites Argument

Wenn wir das zweite Argument nicht übergeben, erstreckt sich das extrahierte JavaScript-Array-Slice bis zum letzten Element:

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 mit negativen Offsets

Beachten Sie auch oben, dass wir negative Zahlen als Argumente übergeben können. Negative Werte der Argumente bezeichnen Offset-Positionen, die vom letzten Element rückwärts gezählt werden. Wir können dies für beide Argumente tun:

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

Wenn wir für Start einen größeren Wert als für Ende übergeben, erhalten wir ein leeres Array:

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

Dies weist darauf hin, dass wir mit dem Slicing immer von einem weniger positiven Index aus beginnen müssen.

Array.prototype.slice: Startposition größer als die Länge des Arrays

Wenn wir für Start einen größeren Wert als die Länge des Arrays übergeben, erhalten wir ebenfalls ein leeres Array:

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

Verwenden von JS-Slices mit Sparse-Arrays

Wenn unser Ziel-Slice Elemente mit geringer Dichte enthält, werden diese auch kopiert:

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: Arrays aus einer Liste von Argumenten erstellen

In diesem Abschnitt beschäftigen wir uns ein wenig mit dem Schneiden. Wir entwickeln zwei interessante Möglichkeiten mit Array.prototype.slice, um ein Array aus einer Liste von Argumenten zu erstellen, die an eine Funktion übergeben werden.

Der erste:

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

Das war einfach.

Die nächste Stufe, dies zu tun, ist die denkbar unordentlichste Art und Weise:

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.

Das obige ist der detaillierte Inhalt vonJavascript-Slice-Methode mit Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!