Maîtriser les fonctions de tableau en JavaScript : slice, splice et forEach

Fonctions de tableau en JavaScript : slice, splice et forEach

Les tableaux JavaScript sont livrés avec un ensemble de méthodes intégrées qui vous aident à manipuler et à interagir avec les éléments du tableau. Trois méthodes de tableau couramment utilisées sont slice, splice et forEach. Ces méthodes peuvent considérablement améliorer votre capacité à travailler avec des tableaux de manière propre et efficace.

1. Méthode slice()

La méthode slice() est utilisée pour extraire une partie d'un tableau sans modifier le tableau d'origine. Il crée une copie superficielle d'une partie du tableau et renvoie un nouveau tableau.

Syntaxe :

array.slice(start, end);

• start : L'index auquel commencer l'extraction. L'élément à cet index est inclus.
• end : L'index auquel terminer l'extraction (non inclus). S'il est omis, il coupe jusqu'à la fin du tableau.

Exemples :

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• Dans cet exemple, arr.slice(1, 3) renvoie un nouveau tableau commençant à l'index 1 et se terminant juste avant l'index 3.

Si l'argument de fin est omis, slice() copiera tout depuis l'index de début jusqu'à la fin du tableau :

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

Indices négatifs :

Vous pouvez également utiliser des indices négatifs pour découper à partir de la fin du tableau :

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

2. Méthode splice()

La méthode splice() est utilisée pour modifier un tableau en ajoutant ou en supprimant des éléments. Il modifie le tableau d'origine et peut être utilisé pour insérer ou supprimer des éléments à un index spécifique.

Syntaxe :

array.splice(start, deleteCount, item1, item2, ..., itemN);

• start : L'index à partir duquel commencer à modifier le tableau.
• deleteCount : Le nombre d'éléments à supprimer à partir de l'index de départ.
• item1, item2, ..., itemN : Éléments à ajouter au tableau à partir de l'index de départ.

Exemples :

const arr = [1, 2, 3, 4, 5];

// Remove 2 elements from index 2
const removedElements = arr.splice(2, 2);

console.log(arr);  // Output: [1, 2, 5]
console.log(removedElements);  // Output: [3, 4]

• Dans cet exemple, arr.splice(2, 2) supprime 2 éléments en commençant à l'index 2 (3 et 4).

Vous pouvez également utiliser splice() pour ajouter des éléments au tableau :

const arr = [1, 2, 3, 4, 5];

// Insert 6 and 7 at index 2
arr.splice(2, 0, 6, 7);

console.log(arr);  // Output: [1, 2, 6, 7, 3, 4, 5]

• Ici, arr.splice(2, 0, 6, 7) insère 6 et 7 à l'index 2 sans supprimer aucun élément (deleteCount est 0).

Supprimer et additionner :

Vous pouvez également utiliser splice() pour supprimer et ajouter des éléments en une seule opération :

array.slice(start, end);

3. Méthode forEach()

La méthode forEach() est utilisée pour parcourir les éléments d'un tableau et appliquer une fonction à chaque élément. Contrairement à map() ou filter(), forEach() ne renvoie pas de nouveau tableau ; il exécute simplement la fonction donnée sur chaque élément.

Syntaxe :

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• callback : La fonction à exécuter sur chaque élément.
  • currentValue : L'élément actuel en cours de traitement dans le tableau.
  • index : L'index de l'élément actuel.
  • array : Le tableau sur lequel forEach est appelé.

Exemple :

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

Utilisation des fonctions fléchées :

Vous pouvez également utiliser une fonction flèche pour rendre le code plus concis :

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

Modification des éléments du tableau :

Gardez à l'esprit que forEach() est utilisé pour effectuer des effets secondaires (par exemple, enregistrer ou mettre à jour des valeurs), et non pour renvoyer ou modifier le tableau. Si vous avez besoin d'un nouveau tableau basé sur celui existant, pensez à utiliser map().

array.splice(start, deleteCount, item1, item2, ..., itemN);

Comparaison de slice, splice et forEach

Method	Purpose	Mutates Original Array	Returns Value
slice	Extracts a portion of an array without modifying it	No	A new array (shallow copy)
splice	Adds/removes elements at specific positions in array	Yes	The removed elements (array)
forEach	Executes a function on each array element	No	undefined

Conclusion

• slice() est parfait pour extraire une partie d'un tableau sans modifier le tableau d'origine.
• splice() vous permet de supprimer, remplacer ou ajouter des éléments à un tableau, et modifie le tableau d'origine.
• forEach() est idéal pour parcourir les éléments du tableau et effectuer des effets secondaires, mais il ne renvoie pas un nouveau tableau.

Ces méthodes sont des outils essentiels lorsque vous travaillez avec des tableaux en JavaScript et peuvent rendre votre code plus efficace et plus lisible.

---

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!