Méthode Javascript Slice avec exemple

Qu'est-ce que la tranche de tableau JavaScript ?

Array.prototype.slice est une méthode JS Array utilisée pour extraire un sous-tableau contigu ou une "tranche" d'un tableau existant.

La tranche JavaScript peut prendre deux arguments : l'indicateur de début et l'indicateur de fin de la tranche, tous deux facultatifs. Il peut également être invoqué sans aucun argument. Ainsi, il a les signatures d'appel suivantes :

// 

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

Si je veux découper le tableau pour en prendre une partie, il existe en fait une fonction slice intégrée pour Javascript. Dès la sortie de la boîte, il clonera la matrice d'origine.

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

Le résultat pointe vers une nouvelle adresse mémoire, pas vers le tableau d'origine. Cela peut être très utile si vous souhaitez enchaîner le résultat avec d'autres fonctions. La véritable utilisation est lorsque vous fournissez une entrée à la tranche.

Index de démarrage

La tranche peut prendre jusqu'à deux paramètres d'entrée. Le premier s'appelle l'index de départ, et cela indiquerait où il doit commencer la tranche.

[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

Par défaut, il découpera jusqu'à la fin du tableau. La chose intéressante à propos de l'index de départ est que non seulement vous pouvez utiliser un zéro ou un nombre positif, mais vous pouvez également utiliser un nombre négatif.

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

Quand c'est un nombre négatif, il fait référence à un index comptant à partir de la fin n . Par exemple, -1 fait référence au dernier élément du tableau, -2 fait référence à l'avant-dernier élément, etc. Notez qu'il n'y a pas de -0 , car il n'y a aucun élément au-delà du dernier élément. Cela peut être assez apparent ou déroutant selon la situation.

Indice de fin

La tranche peut prendre un deuxième paramètre appelé l'index de fin.

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

L'index de fin, également appelé indice de plage, pointe vers l'indice d'élément + 1. Qu'est-ce que cela signifie ? Pour expliquer cela, ce serait relativement plus facile si nous pouvions nous référer à l'instruction for :

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

La variable i commence à 0 , l'index de départ ; et se termine à n, l'index de fin. L'index de fin n'est pas le dernier élément du tableau, car ce serait n - 1 . Mais lorsqu'il s'agit de l'index de fin, n représente la « fin » avec le dernier élément inclus. Si c'est la première fois que vous utilisez l'index de fin, rappelez-vous simplement comment l'instruction for est écrite, ou rappelez-vous simplement de prendre l'index du dernier élément, puis de lui ajouter un. Une autre façon de voir les choses est que l'index de fin est ouvert, [début, fin).

Comme dans l'indice de début, l'indice de fin peut également être négatif.

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

Faites un peu plus attention ici. -1 fait référence au dernier élément, donc s'il est utilisé comme deuxième paramètre, cela signifie que le dernier élément sera exclu, comme nous l'avons expliqué, de manière ouverte.

Kool mais et si je veux inclure le dernier élément ?

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

Oui, utilisez simplement l'entrée d'un seul paramètre.

Comment utiliser la tranche JavaScript : exemple réel

Un exemple typique de découpage d'un tableau consiste à produire une section contiguë à partir d'un tableau source. Par exemple, les trois premiers éléments, les trois derniers éléments et certains éléments s'étendant d'un certain index jusqu'à un autre index.

Comme le montrent les exemples ci-dessous :

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

Si nous ne transmettons aucun argument à la tranche JavaScript, nous obtenons une copie superficielle du tableau source avec tous les éléments :

const allCopied = elements.slice();

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

C'est effectivement [...éléments].

Méthode de tranche de tableau JavaScript sans deuxième argument

Si nous ne transmettons pas le deuxième argument, la tranche de tableau JavaScript extraite s'étend jusqu'au dernier élément :

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 avec décalages négatifs

Remarquez également ci-dessus, nous pouvons passer des nombres négatifs comme arguments. Les valeurs négatives des arguments indiquent des positions décalées comptées à rebours à partir du dernier élément. Nous pouvons faire cela pour les deux arguments :

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

Si nous transmettons une valeur plus grande pour le début que pour la fin, nous obtenons un tableau vide :

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

Cela indique que nous devons toujours commencer à découper à partir d'un indice positif moindre.

Array.prototype.slice : position de départ supérieure à la longueur du tableau

De même, si nous transmettons une valeur de début supérieure à la longueur du tableau, nous obtenons un tableau vide :

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

Utiliser une tranche JS avec des tableaux clairsemés

Si notre tranche cible contient des éléments clairsemés, ils sont également copiés :

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 : création de tableaux à partir d'une liste d'arguments

Dans cette section, nous devenons un peu fous du slicing. Nous développons deux manières intéressantes avec Array.prototype.slice pour construire un tableau à partir d'une liste d'arguments passés à une fonction.

Le premier :

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

C'était facile.

La manière suivante de procéder est de la manière la plus compliquée possible :

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!