Comment utiliser la méthode Javascript Slice

La méthode Javascript slice() ne modifiera ni ne modifiera les données d'origine. Ce didacticiel vous apprendra à utiliser la technique des tranches Javascript et à exploiter son potentiel immuable.

Qu'est-ce que la méthode javascript slice ?

En termes simples, la fonction javascript slice est une méthode de tableau ou de chaîne intégrée qui renvoie une copie superficielle d'une partie d'un tableau dans un nouvel objet tableau, où 'start' et 'end' sont les indices du tableau. Il n'y aura aucune modification du tableau initial.

 const language = ["javascript", "java", "ruby", "rust", "python"]; console.log(language.slice(2)); // ['ruby', 'rust', 'python']

Nous découpons à l'index 2 en utilisant une base indexée à zéro, ce qui donne un nouveau tableau contenant l'élément tranché. Mais que se passe-t-il si nous examinons le tableau d'origine (langue) ? Sera-t-il modifié ? La technique javascript slice, contrairement à la fonction javascript splice, ne modifie ni n'affecte les données d'origine.

Comment utiliser la méthode des tranches Javascript

La méthode Javascript slice est plutôt simple à utiliser ; cependant, afin de bien le comprendre, nous insistons sur sa syntaxe.

Quelle est la syntaxe pour cela ? Cette syntaxe s'écrit simplement en entourant le mot 'slice' d'une parenthèse '()' comme suit :

 slice()

Comme il s'agit d'une méthode, elle accepte des arguments, ce qui vous permet une plus grande flexibilité sur ce que vous pouvez faire avec un tableau à l'aide de la fonction slice.

Ils sont les suivants :

1. Commencer
2. Fin

Le paramètre start, qui indique simplement l'index auquel la méthode slice doit commencer, peut être passé à la fonction slice. Pour reprendre l'exemple précédent, la méthode slice accepte 2 comme entrée, ce qui signifie simplement commencer à partir de l'index 2. Si l'argument start n'est pas spécifié, l'index sera défini sur 0. L'argument end peut également être envoyé à la tranche méthode, mais elle dépend du paramètre start pour fonctionner correctement. L'argument end indique au tableau à quel index il doit terminer l'extraction de l'élément. Il le fait en n'incluant pas la fin, mais seulement jusqu'à la fin. Si l'argument de fin n'est pas spécifié, la longueur complète du tableau est renvoyée.

 slice(start) slice(start,end)

Utilisation de la méthode slice : supposons que nous ayons un tableau contenant plusieurs types de langages de programmation et que nous voulions choisir trois éléments dans le tableau. Nous écrivons simplement la fonction slice(1,4), en fournissant deux paramètres basés sur l'index, le début et la fin. L'extraction commencerait par l'index spécifié, 1, et se terminerait par 4, mais au lieu de renvoyer le quatrième élément précis, elle fournirait l'élément avant le quatrième élément.

Voici comment c'est fait :

 const language = ["javascript", "java", "ruby", "rust", "python"]; console.log(language.slice(1,4)); // ['ruby', 'rust', 'python']

Le nouveau tableau a été renvoyé sans modifier le tableau existant.

 const language = ["javascript", "java", "ruby", "rust", "python"]; console.log(language.slice(1,4)); // ['java', 'ruby', 'rust'] console.log(language); // ['javascript', 'java', 'ruby', 'rust', 'python']

Utilisation de la méthode slice sur des non-tableaux

Le tableau javascript peut être utilisé dans les domaines suivants ; cependant, il convient de noter que la méthode des tranches peut également être utilisée sur des non-tableaux.

1. Utilisation de la méthode Javascript slice sur les objets.

2. Utilisation de la méthode de tranche Javascript sur un tableau clairsemé.

3. Utilisation de la méthode de tranche Javascript pour convertir des non-tableaux en tableau.

   Utilisation de la méthode de tranche Javascript sur des objets

   La méthode javascript slice fonctionne sur les objets en considérant d'abord la longueur de la propriété de l'objet, puis en lisant les propriétés de la clé entière du début à la fin. Et mettez-les dans un nouveau tableau. Il utilise la méthode call().

   
   

    const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.slice.call(arrayLike, 1, 3)); // [3, 4]

   Utilisation de la méthode de tranche Javascript sur un tableau clairsemé

   Lorsque la méthode javascript slice est utilisée sur un tableau clairsemé, le tableau renvoyé par slice() peut être clairsemé si la source est clairsemée.

   
   

    console.log([1, 2, , 4, 5].slice(1, 4)) // [2, empty, 4]

   Utilisation de la méthode de tranche Javascript pour convertir des non-tableaux en tableau

   Pour construire une fonction utilitaire qui transforme un objet de type tableau en un tableau, utilisez la méthode Javascript slice, ainsi que les méthodes call() et bind() .

   
   

 const sliceEl = Function.prototype.call.bind(Array.prototype.slice); function list() {  return sliceEl(arguments); } const listed = list(1, 2, 3) console.log(listed) //[1, 2, 3]

FAQ

Quelle est la différence entre la méthode slice et splice en Javascript ?

Slice est utilisé pour créer un nouveau tableau à partir du tableau d'origine, tandis que splice est utilisé pour ajouter/supprimer des éléments du tableau d'origine. Dans le cas d'une tranche, les modifications ne sont pas répercutées dans le tableau d'origine ; cependant, dans le cas d'une épissure, les modifications sont répercutées dans le tableau d'origine.

Quelle est la similitude entre la méthode slice et splice ?

La principale similitude entre eux est qu'ils sont tous les deux des méthodes de tableau javascript.

Quand utiliser la méthode slice ?

Si vous ne voulez pas que les données d'origine soient modifiées ou mutées lors de l'exécution d'une tâche, l'approche par tranches est la meilleure solution. C'est une approche typique dans ReactJs.

Plats à emporter

Enfin, la méthode javascript slice() est un moyen de copier. Il ne modifie pas le tableau d'origine mais fournit à la place une copie superficielle avec certains des mêmes éléments que le tableau d'origine. Ils acceptent deux paramètres optionnels, 'start' et 'end', et sélectionnent des éléments du tableau en fonction de ces paramètres. Ils sont applicables aux non-tableaux. Objets, sparse-array, etc.