Clarifions la confusion autour des méthodes slice (), splice () et split () en JavaScript

Les méthodes JavaScript intégrées nous aident beaucoup lors de la programmation, une fois que nous les comprenons correctement. Je voudrais en expliquer trois dans cet article: les méthodes slice(), splice()et split(). Peut-être parce que leur nom est si similaire qu'ils sont souvent confus, même parmi les développeurs expérimentés.

Je conseille aux étudiants et aux développeurs juniors de lire attentivement cet article car ces trois méthodes peuvent également être posées dans les entretiens d'embauche.

Vous pouvez trouver un résumé de chaque méthode à la fin. Si vous préférez, vous pouvez également regarder la version vidéo ci-dessous:

Alors commençons…

Tableaux JavaScript

Tout d'abord, vous devez comprendre le fonctionnement des tableaux JavaScript . Comme dans d'autres langages de programmation, nous utilisons des tableaux pour stocker plusieurs données dans JS. Mais la différence est que les tableaux JS peuvent contenir différents types de données à la fois.

Parfois, nous devons effectuer des opérations sur ces tableaux. Ensuite, nous utilisons des méthodes JS comme slice () et splice () . Vous pouvez voir ci-dessous comment déclarer un tableau en JavaScript:

let arrayDefinition = [];   // Array declaration in JS

Déclarons maintenant un autre tableau avec différents types de données. Je vais l'utiliser ci-dessous dans des exemples:

let array = [1, 2, 3, "hello world", 4.12, true];

Cette utilisation est valide en JavaScript. Un tableau avec différents types de données: chaîne, nombres et booléen.

Tranche ()

La méthode slice () copie une partie donnée d'un tableau et renvoie cette partie copiée en tant que nouveau tableau. Cela ne change pas le tableau d'origine.

array.slice(from, until);

  • De: tranche le tableau à partir d' un index d'élément
  • Jusqu'à: découper le tableau jusqu'à un autre index d'élément

Par exemple, je souhaite découper les trois premiers éléments du tableau ci-dessus. Puisque le premier élément d'un tableau est toujours indexé à 0, je commence à découper «à partir de» 0.

array.slice(0, until);

Voici maintenant la partie délicate. Quand je veux découper les trois premiers éléments, je dois donner le paramètre jusqu'à 3. La méthode slice () n'inclut pas le dernier élément donné.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Cela peut créer une certaine confusion. C'est pourquoi j'appelle le deuxième paramètre «jusqu'à».

let newArray = array.slice(0, 3);   // Return value is also an array

Enfin, j'attribue le tableau découpé à la variable newArray . Voyons maintenant le résultat:

Remarque importante: la méthode Slice () peut également être utilisée pour les chaînes.

Épissure ()

Le nom de cette fonction est très similaire à slice () . Cette similitude de dénomination confond souvent les développeurs. La méthode splice () modifie un tableau, en y ajoutant ou en supprimant des éléments. Voyons comment ajouter et supprimer des éléments avec splice ( ) :

Suppression d'éléments

Pour supprimer des éléments, nous devons donner le paramètre d' index et le nombre d'éléments à supprimer:

array.splice(index, number of elements);

L'index est le point de départ de la suppression d'éléments. Les éléments qui ont unnuméro d'index plus petit de l'index donné ne seront pas supprimés:

array.splice(2);  // Every element starting from index 2, will be removed

Si nous ne définissons pas le deuxième paramètre, chaque élément à partir de l'index donné sera supprimé du tableau:

Comme deuxième exemple, je donne le deuxième paramètre à 1, donc les éléments commençant à l'index 2 seront supprimés un par un chaque fois que nous appelons la méthode splice () :

array.splice(2, 1);

Après le 1er appel:

Après le 2ème appel:

Cela peut continuer jusqu'à ce qu'il n'y ait plus d'index 2.

Ajout d'éléments

Pour ajouter des éléments, nous devons les donner comme 3ème, 4ème, 5ème paramètres (dépend du nombre à ajouter) à la méthode splice () :

array.splice (index, nombre d'éléments, élément, élément);

A titre d'exemple, j'ajoute a et b au tout début du tableau et je ne supprime rien:

array.splice(0, 0, 'a', 'b');

Divisé ( )

Les méthodes Slice () et splice () sont destinées aux tableaux. Laméthode split () est utilisée pour les chaînes . Il divise une chaîne en sous-chaînes et les renvoie sous forme de tableau. Il prend 2 paramètres, et les deux sont facultatifs.

string.split(separator, limit);

  • Séparateur: définit comment diviser une chaîne… par une virgule, un caractère, etc.
  • Limit: limite le nombre de divisions avec un nombre donné

La méthode split () ne fonctionne pas directement pour les tableaux . Cependant, nous pouvons d'abord convertir les éléments de notre tableau en une chaîne, puis nous pouvons utiliser la méthode split () .

Voyons voir comment ça fonctionne.

Tout d'abord, nous convertissons notre tableau en une chaîne avec la méthode toString () :

let myString = array.toString();

Maintenant, séparons myString par des virgules, limitons -les à trois sous-chaînes et renvoyons- les sous forme de tableau:

let newArray = myString.split(",", 3);

Comme nous pouvons le voir, myString est divisé par des virgules. Puisque nous limitons le fractionnement à 3, seuls les 3 premiers éléments sont renvoyés.

REMARQUE: Si nous avons une utilisation comme celle-ci:array.split("");alors chaque caractère de la chaîne sera divisé en sous-chaînes:

Sommaire:

Tranche ()

  • Copie les éléments d'un tableau
  • Les renvoie comme un nouveau tableau
  • Ne change pas la matrice d'origine
  • Commence le découpage de… jusqu'à l'index donné: array.slice (de, jusqu'à)
  • La tranche n'inclut pas le paramètre d'index "jusqu'à"
  • Peut être utilisé à la fois pour les tableaux et les chaînes

Épissure ()

  • Utilisé pour ajouter / supprimer des éléments du tableau
  • Renvoie un tableau d'éléments supprimés
  • Modifie le tableau
  • Pour ajouter des éléments: array.splice (index, nombre d'éléments, élément)
  • Pour supprimer des éléments: array.splice (index, nombre d'éléments)
  • Ne peut être utilisé que pour les tableaux

Divisé ( )

  • Divise une chaîne en sous-chaînes
  • Les renvoie dans un tableau
  • Prend 2 paramètres, les deux sont facultatifs: string.split (séparateur, limite)
  • Ne change pas la chaîne d'origine
  • Ne peut être utilisé que pour les chaînes

Il existe de nombreuses autres méthodes intégrées pour les tableaux et les chaînes JavaScript, qui facilitent le travail avec la programmation JavaScript. Ensuite, vous pouvez consulter mon nouvel article sur les méthodes de sous-chaîne JavaScript.

Si vous souhaitez en savoir plus sur le développement web, n'hésitez pas à me suivre sur Youtube !

Merci pour la lecture!