Array.splice et Array.slice en JavaScript

Bonjour, Habr! Je vous présente la traduction de l'article «Array.splice et Array.slice en JavaScript» de Kunal Tandon.

Vous devez simplement utiliser les fonctions ci-dessus disponibles dans le prototype JavaScript Array. Mais ils se ressemblent tellement que parfois vous pouvez être confus entre eux.

Différences clés

Array.splice modifie le tableau d'origine et renvoie un tableau contenant les éléments supprimés.

Array.slice ne modifie pas le tableau d'origine. Il renvoie simplement un nouveau tableau d'éléments, qui est un sous-ensemble du tableau d'origine.

Array.splice

Splice est utilisé pour modifier le contenu d'un tableau, ce qui comprend la suppression d'éléments, le remplacement d'éléments existants ou même l'ajout de nouveaux éléments à ce tableau.

Lorsque vous utilisez la fonction d'épissage, le tableau d'origine est mis à jour.

Considérez le tableau suivant:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Array.splice avec syntaxe

arr.splice (fromIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);

Supprimer des éléments

Pour supprimer des éléments d'un tableau, nous écrivons:

 var deleItems = arr.splice (3, 2); 

Cela supprimera les deux éléments à partir de l'index 3 et retournera le tableau distant. En conséquence, nous obtenons:

 deleItems // [3, 4] arr // [0, 1, 2, 5, 6, 7, 8] 

Ajout de nouveaux éléments

Pour ajouter de nouveaux éléments au tableau, nous écrivons:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var arr2 = arr.splice (2, 0, 100, 101); 

À partir du deuxième élément du tableau, les nombres 100 et 101 seront ajoutés. Les valeurs finales seront les suivantes:

 arr2 // [],         arr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8] 

Modifier un élément existant

Nous pouvons délicatement modifier un élément existant dans le tableau en utilisant une épissure pour supprimer l'élément par son numéro d'index et insérer un nouvel élément à sa place.

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Pour remplacer 3 par 100, nous écrivons:

 var arr2 = arr.splice (3, 1, 100); //   -   3  1    100 

Nous obtenons les valeurs suivantes pour arr et arr2 après avoir exécuté l'extrait de code ci-dessus:

 arr2 // [3]      3   arr arr // [0, 1, 2, 100, 4, 5, 6, 7, 8] // 3   100   arr 

Array.slice

Bien que splice puisse également insérer et mettre à jour des éléments de tableau, la fonction slice est uniquement utilisée pour supprimer des éléments du tableau.
Nous ne pouvons supprimer des éléments du tableau qu'en utilisant la fonction slice

Syntaxe Array.slice

arr.slice (startIndex, endIndex);

startIndex - l'index de départ de l'élément pour le nouveau tableau, que nous devrions obtenir dans le nouveau tableau
startIndex.endIndex (facultatif) est l'index final auquel le découpage doit être effectué, sans inclure cet élément.

Considérez le tableau suivant:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Pour obtenir une partie du tableau à partir des valeurs [2, 3, 4, 5], nous écrivons:

 var slicedArr = arr.slice (2, 6); 

Veuillez noter que nous avons spécifié ici le deuxième argument 6, pas 5. Après avoir exécuté le code ci-dessus, nous obtenons le tableau suivant:

 arr // [0, 1, 2, 3, 4, 5, 6, 7, 8] slicedArr // [2, 3, 4, 5] 

La variable arr reste inchangée après l'exécution de l'instruction slice, tandis que l'instruction splice met à jour le tableau d'origine.

Donc, si nous voulons mettre à jour le tableau d'origine, nous utilisons la fonction splice, mais si nous n'avons besoin que d'une partie du tableau, nous utilisons slice.