Array.slice vs Array.splice : dissiper la confusion

Introduction

En tant que développeur JavaScript, j'ai souvent trouvé deux méthodes Array un peu difficiles à comprendre/complètement

1. Array.slice
2. Array.splice.

J'ai donc décidé d'approfondir et de décomposer ces méthodes avec des exemples clairs.

Si je réécris la syntaxe

Array.slice

returns the deleted elements in a form of Array = Array.prototype.slice(startIndex, endIndex-1);

Array.splice (P pour Permanent - Rappelez-vous toujours)

La méthode splice en JavaScript modifie le contenu d'un tableau en supprimant ou remplaçant des éléments existants et/ou en ajoutant de nouveaux éléments en place

Suppression de la syntaxe de l'élément

returns the deleted elements in a form of Array = Array.prototype.splice(startIndex, endIndex-1); // permanent 

Ajout d'une syntaxe d'élément

array.splice(startIndex, 0, item1, item2, ..., itemX);

REMARQUE :-

1. Il modifie le tableau d'origine et renvoie le tableau supprimé.

2. Lorsqu'il se comporte comme une opération d'ajout, il renvoie [] car il ne supprime rien.

voyons quelques exemples :-

Q1. Exercice 1 - Utiliser slice pour obtenir une partie d'un tableau : Créez un tableau de nombres de 1 à 10. Utilisez la méthode slice pour obtenir un nouveau tableau comprenant des nombres de 4 à 8.

const arr = Array.from(Array(10), (_, i) => i+1);
console.log('Array --> ', arr);
console.log('get a new array that includes numbers from 4 to 8 --> ', arr.slice(3, 8)); // Array.prototype.slice(startIndex, endIndex-1);

// [ 4, 5, 6, 7, 8 ]

Q2. Exercice 2 - Utiliser splice pour supprimer des éléments d'un tableau : Créez un tableau de fruits. Utilisez la méthode d'épissage pour supprimer « pomme » et « banane » du tableau.

const fruits = ['apple', 'banana', 'orange', 'mango', 'kiwi'];

fruits.splice(0, 2)// permanent

console.log('splice method to remove "apple" and "banana" from the array. --> ', fruits);

// [ 'orange', 'mango', 'kiwi' ]

Q3. Exercice 3 - Utiliser splice pour ajouter des éléments à un tableau : Créez un tableau de couleurs. Utilisez la méthode d'épissage pour ajouter « rose » et « violet » après « rouge ».

const colors = ['red', 'green', 'blue'];

const y = colors.splice(1, 0, "pink", "purple"); /
console.log(y); // [] see above to see why.
console.log('splice method to add "pink" and "purple" after "red" --> ', colors)

// [ 'red', 'pink', 'purple', 'green', 'blue' ]

Q4. Exercice 4 - Utilisation conjointe de slice et splice : créez un tableau de lettres de « a » à « e ». Utilisez slice pour obtenir un nouveau tableau des trois premières lettres. Utilisez ensuite splice sur le tableau d'origine pour supprimer ces lettres.

const letters = ['a', 'b', 'c', 'd', 'e'];
const newSlice = letters.slice(0, 3);
const x = letters.splice(0, 3);
console.log(x);
console.log('slice to get a new array of the first three letters --> ', newSlice) // [ 'a', 'b', 'c' ]

console.log('Then use splice on the original array to remove these letters --> ', letters)[ 'd', 'e' ]

N'hésitez pas à me contacter si vous avez des questions/préoccupations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!