Dans cet article, nous allons comprendre la méthode JavaScript Array slice() à l’aide d’exemples, si vous aimez cette article, retrouvez d’autre article traitant des méthodes Javascript comme celle sur mon article javascript reduce.
La méthode javascript slice() renvoie une copie d’une partie d’un tableau dans un nouvel objet tableau.
Comme le mot slice signifie la partie de quelque chose que l’on obtient. De la même manière, ici en javascript, la méthode slice() renvoie la tranche ou le sous-tableau d’un tableau particulier.
Ainsi, cette méthode est appliquée sur les tableaux existants à partir desquels elle va créer un sous-ensemble ou un sous-groupe.
Cette méthode accepte 2 arguments : le premier est le début et le second est la fin jusqu’à laquelle nous voulons découper le tableau.
Une chose à noter à propos de slice est qu’il retournera le tableau à partir de l’index de la position de départ mais n’inclura pas l’index de la position finale, ce qui signifie que la position du second argument ne sera pas incluse.
Et si un seul argument est passé, alors par défaut, elle retournera la tranche entière du tableau à partir de l’indice de départ du premier argument jusqu’à la longueur du tableau.
Nous pouvons également spécifier des index négatifs avec cette méthode, ce qui signifie que si nous passons des valeurs négatives, elles seront considérées comme des positions dans le tableau mais du côté droit.
let numbers = [2, 3, 5, 7, 11, 13, 17];
// créer un autre tableau en découpant les nombres de l'index 3 à 5
let newArray = numbers.slice(3, 6);
console.log(newArray);
// Sortie: [ 7, 11, 13 ]La syntaxe javascript de slice()
La syntaxe de la méthode slice() est la suivante :
arr.slice(start, end)Ici, arr est un tableau.
Les paramètres javscript slice()
La méthode slice() prend en compte :
- start (facultatif) – Indice de départ de la sélection. S’il n’est pas fourni, la sélection commence à start 0.
- end (optional) – Indice de fin de la sélection (exclusif). Si elle n’est pas fournie, la sélection se termine à l’indice du dernier élément.
Renvoie un nouveau tableau contenant les éléments extraits.
Exemple 1 : Méthode JavaScript slice()
let languages = ["JavaScript", "Python", "C", "C++", "Java"];
// découpage du tableau (du début à la fin)
let new_arr = languages.slice();
console.log(new_arr); // [ 'JavaScript', 'Python', 'C', 'C++', 'Java' ]
// le découpage à partir du troisième élément
let new_arr1 = languages.slice(2);
console.log(new_arr1); // [ 'C', 'C++', 'Java' ]
// le découpage en tranches du deuxième élément au quatrième élément
let new_arr2 = languages.slice(1, 4);
console.log(new_arr2); // [ 'Python', 'C', 'C++' ]Exemple 2 : Méthode JavaScript slice()
En JavaScript, vous pouvez également utiliser des indices de début et de fin négatifs. L’indice du dernier élément est -1, l’indice de l’avant-dernier élément est -2, et ainsi de suite.
const languages = ["JavaScript", "Python", "C", "C++", "Java"];
// découpage du tableau du début à l'avant-dernier.
let new_arr = languages.slice(0, -1);
console.log(new_arr); // [ 'JavaScript', 'Python', 'C', 'C++' ]
// en découpant le tableau à partir du derier à jusqu'au second.
let new_arr1 = languages.slice(-3);
console.log(new_arr1); // [ 'C', 'C++', 'Java' ]Exemple 3 : Méthode JavaScript slice()
La méthode slice() copie les éléments du tableau de la manière suivante :
- Elle copie les références des objets dans le nouveau tableau. (Par exemple, un tableau imbriqué) Ainsi, si l’objet référencé est modifié, les changements sont visibles dans le nouveau tableau retourné.
- Il copie la valeur des chaînes de caractères et des nombres dans le nouveau tableau.
let humain = {
name: "Pierre",
age: 18,
};
let arr = [humain, "France", "Developper"];
let new_arr = arr.slice();
// objet original
console.log(arr[0]); // { name: 'Pierre', age: 18 }
// modification de l'objet dans le nouveau tableau
new_arr[0].name = "Jean";
// les changements sont reflétés
console.log(arr[0]); // { name: 'Jean', age: 23 }