Explorons Slice (), Splice () & Spread Syntax (…) en JavaScript

Je suis tombé sur ce défi de freeCodeCamp et je suis resté coincé pendant un certain temps à réfléchir à la façon dont je pourrais trouver un moyen de le résoudre. Ils ont déjà mentionné la résolution à l'aide de Slice & Splice. J'étais confus à ce moment-là quand utiliser Slice et quand utiliser Splice.

Ici, je vais partager comment je l'ai résolu avec ces méthodes.

Slice et Splice sont utilisés pour manipuler des tableaux. Voyons comment ils le font.

Tranche:

La méthode Slice prend 2 arguments.

1er argument : spécifie d'où la sélection doit commencer.

Par exemple:

var arr1 = [1,5,8,9]; arr1.slice(1); // [5,8,9]

A partir du premier index (5), il retournera les éléments.

2ème argument : spécifie à quel niveau le point de terminaison doit être. Si vous ne l'avez pas mis entre parenthèses lors de l'appel de la méthode slice, elle renverra les éléments de l'index de départ à la fin du tableau.

var arr1 = [1,5,8,9]; console.log(arr1.slice(1,3)); //[ 5, 8 ]

Si vous mettez un nombre négatif lors de l'appel, la sélection sera sélectionnée à partir de la fin du tableau.

var arr1 = [1,5,8,9]; console.log(arr1.slice(-2)); //[ 8, 9 ]

Remarque: Slice renvoie toujours les éléments sélectionnés du tableau.

Slice ne changera pas le tableau. Le tableau reste intact. Voir l'exemple ci-dessous:

var arr1 = [1,5,8,9]; arr1.slice(2); console.log(arr1); // [ 1, 5, 8, 9 ]

Même si vous avez apporté des modifications au tableau, cela ne l'affectera pas. Il renverra le tableau d'origine tel qu'il est au début.

Épissure:

Cela peut prendre plusieurs arguments.

Cela signifie,

1er argument : spécifie à quelle position un nouvel élément ou un élément existant doit être ajouté / supprimé. Si la valeur est négative, la position sera comptée à partir de la fin du tableau.

2ème argument : le nombre d'éléments à supprimer de la position de départ. S'il vaut 0, aucun élément ne sera supprimé. S'il n'est pas passé, il supprimera tous les éléments de la position de départ.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2)); // [ 5, 8 ]

3e argument -> nième argument : La valeur des éléments que vous souhaitez ajouter au tableau.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2,'Hi','Medium')); // [5,8]

Vous pensez peut-être que nous avons ajouté «Salut», «Moyen» au tableau mais cela n'apparaît pas ici…. Droite?

Oui, nous avons consolé l' arr1.splice (1,2, 'Hi', 'Medium').

Remarque:

  • Splice retournera uniquement les éléments supprimés du tableau.
  • Splice changera le tableau d'origine
var arr1 = [1,5,8,9]; arr1.splice(1,2,'Hi','Medium'); console.log(arr1); // [ 1, 'Hi', 'Medium', 9 ]

Syntaxe de diffusion:

Définition : permet à un itérable comme une expression de tableau ou une chaîne d'être développé aux endroits où zéro ou plus d'arguments (pour les appels de fonction) ou d'éléments (pour les littéraux de tableau) sont attendus, ou une expression d'objet à être développée aux endroits où zéro ou plus des paires clé-valeur (pour les littéraux d'objet) sont attendues.

Prenons un exemple pour cela:

var arr1 = [1,3,6,7]; var arr2 = [5,arr1,8,9]; console.log(arr2); // [ 5, [ 1, 3, 6, 7 ], 8, 9 ]

Je veux que ce soit dans un seul tableau comme [5, 1, 3, 6, 7, 8, 9].

Je peux utiliser cette syntaxe de propagation pour résoudre ce problème:

var arr1 = [1,3,6,7]; var arr2 = [5,...arr1,8,9]; console.log(arr2); //[ 5, 1, 3, 6, 7, 8, 9 ]

Une autre utilisation principale de Spread Syntax est lors de la copie d'un tableau:

var arr = [1, 2, 3]; var arr2 = arr; arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3, 4 ]

J'ai ajouté " 4 " à arr2 uniquement. Mais il a également fait le changement vers arr.

Nous pouvons résoudre cela en utilisant la syntaxe Spread comme suit ...

var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3]

Vous pouvez vous référer à la documentation MDN pour plus d'informations sur Spread Syntax.

Alors, jetons un coup d'œil au défi.

function frankenSplice(arr1, arr2, n) { // It's alive. It's alive! let array2Copy = [...arr2]; array2Copy.splice(n,0, ...arr1); //console.log(array2Copy); return array2Copy; } frankenSplice([1, 2, 3], [4, 5, 6], 1);

La condition principale de ce défi est «ne doit pas modifier arr1 / arr2 après l'exécution de la fonction».

Donc, créé un tableau de copie de arr2, et en utilisant la méthode splice , ajoutez le arr1 à l'intérieur de la copie de arr2 qui est nommée array2Copy.

Conclusion finale:

-> La méthode Slice

  • renvoie les éléments sélectionnés du tableau
  • prendre 2 arguments
  • ne pas modifier le tableau d'origine

-> La méthode Splice

  • renvoie les éléments supprimés du tableau
  • prendre plusieurs arguments
  • modifie le tableau d'origine

C'est mon tout premier tutoriel sur le codage - merci d'avoir lu! Vos commentaires m'aideront à développer mes compétences en codage et en écriture.

Bon codage…!

Connectez-vous avec moi via Twitter