Fonction splice() de tableau JavaScript expliquée : suppression, insertion, remplacement d’éléments (avec des exemples pratiques)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

3. Manières pratiques d’utiliser splice() (avec exemples de code)

Dans cette section, nous parcourrons des exemples concrets d’utilisation de la méthode splice() de JavaScript. Nous couvrirons trois schémas courants — la suppression, l’insertion et le remplacement — et nous passerons en revue les points clés pour chacun.

3.1 Comment supprimer des éléments

Avec splice(), vous pouvez facilement retirer des éléments spécifiques d’un tableau.

Exemple 1 : Supprimer un seul élément

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 1); // Deletes "banana"
console.log(fruits); // ["apple", "cherry", "date"]

Explication :

• Supprime 1 élément à partir de l’index 1 (« banana »).

Exemple 2 : Supprimer plusieurs éléments

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2); // Deletes "banana" and "cherry"
console.log(fruits); // ["apple", "date"]

Explication :

• Supprime 2 éléments à partir de l’index 1 (« banana » et « cherry »).

Note :
Comme les éléments retirés sont exclus du tableau, le tableau d’origine est modifié (c’est une méthode destructive).

3.2 Comment insérer des éléments

Avec splice(), vous pouvez insérer de nouveaux éléments à une position précise.

Exemple 1 : Insérer un élément

let colors = ["red", "blue"];
colors.splice(1, 0, "green"); // Inserts "green" at index 1
console.log(colors); // ["red", "green", "blue"]

Explication :

• En définissant le deuxième argument à 0, vous insérez sans supprimer aucun élément.

Exemple 2 : Insérer plusieurs éléments

let colors = ["red", "blue"];
colors.splice(1, 0, "green", "yellow"); // Inserts multiple elements
console.log(colors); // ["red", "green", "yellow", "blue"]

Note :
Il n’y a pas de limite stricte quant à la position d’insertion ou au nombre d’éléments — insérez autant que nécessaire.

3.3 Comment remplacer des éléments

Vous pouvez également remplacer des éléments existants à l’aide de splice().

Exemple 1 : Remplacer un seul élément

let numbers = [1, 2, 3, 4];
numbers.splice(1, 1, 5); // Replaces "2" at index 1 with "5"
console.log(numbers); // [1, 5, 3, 4]

Explication :

• Supprime 1 élément à partir de l’index 1, puis insère 5 à la même position.

Exemple 2 : Remplacer plusieurs éléments

let numbers = [1, 2, 3, 4];
numbers.splice(1, 2, 5, 6); // Replaces "2" and "3" with "5" and "6"
console.log(numbers); // [1, 5, 6, 4]

Explication :

• Supprime 2 éléments à partir de l’index 1, puis insère 5 et 6.

4. Cas d’utilisation avancés de splice() : scénarios pratiques

Voici des scénarios pratiques où splice() peut être particulièrement utile — comme la gestion de données de formulaire, la modification de lignes de tableau et le pré‑traitement de jeux de données.

4.1 Exemple : Manipulation des données de formulaire

Gestion dynamique des champs de formulaire

Lors de la création d’un formulaire dynamique où les utilisateurs peuvent ajouter ou supprimer des champs, splice() est extrêmement pratique.

Exemple : Ajout et suppression de champs

let formData = ["Name", "Email", "Phone"];

// Insert a field
formData.splice(2, 0, "Address");
console.log(formData); // ["Name", "Email", "Address", "Phone"]

// Remove a field
formData.splice(1, 1);
console.log(formData); // ["Name", "Address", "Phone"]

Explication :

• Pour l’insertion, nous ajoutons « Address » à l’index 2.
• Pour la suppression, nous retirons « Email » à l’index 1 et les éléments restants se décalent automatiquement.

Ceci est utile lorsque vous devez modifier dynamiquement les champs en fonction des actions de l’utilisateur.

4.2 Ajout et suppression de lignes de tableau dynamiques

Dans les applications web, la gestion de données sous forme de tableau est courante. Voici un exemple d’insertion et de suppression de lignes de tableau.

Exemple : Ajout et suppression de lignes

let tableData = [
  ["ID", "Name", "Age"],
  [1, "Tanaka", 25],
  [2, "Sato", 30]
];

// Insert a new row
tableData.splice(2, 0, [3, "Takahashi", 28]);
console.log(tableData);
// [["ID", "Name", "Age"], [1, "Tanaka", 25], [3, "Takahashi", 28], [2, "Sato", 30]]

// Delete a row
tableData.splice(1, 1);
console.log(tableData);
// [["ID", "Name", "Age"], [3, "Takahashi", 28], [2, "Sato", 30]]

Explanation:

• For inserting , we add a new data row at index 2.
• For deleting , we remove the row at index 1 (Tanaka).

This demonstrates flexible manipulation of table-like data structures.

4.3 Dataset Preprocessing and Editing

When handling large datasets, you may need to edit or replace specific records. Here’s an example of replacing part of a dataset.

Example: Updating a dataset

let users = [
  { id: 1, name: "Tanaka", age: 25 },
  { id: 2, name: "Sato", age: 30 },
  { id: 3, name: "Takahashi", age: 28 }
];

// Update an entry
users.splice(1, 1, { id: 2, name: "Yamada", age: 32 });
console.log(users);
// [{ id: 1, name: "Tanaka", age: 25 }, { id: 2, name: "Yamada", age: 32 }, { id: 3, name: "Takahashi", age: 28 }]

Explanation:

• Deletes the record at index 1 and replaces it with a new object.
• Even object-based data can be edited smoothly with splice() .

5. splice() vs slice(): Key Differences and When to Use Each (With a Comparison Table)

In JavaScript, splice and slice are commonly used methods for working with arrays. Because their names look similar, it’s easy to confuse them—but their behavior and use cases are very different. In this section, we’ll compare splice() and slice() and explain how to choose the right one.

5.1 The Core Difference Between splice() and slice()

5.2 splice() Examples and Characteristics

Characteristics:

• It mutates the original array (a destructive method).
• You can insert, delete, and replace elements.

Example 1: Editing elements with splice()

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2, "orange", "grape"); // Removes "banana" and "cherry", then inserts new elements
console.log(fruits); // ["apple", "orange", "grape", "date"]

Explanation:

• Deletes 2 elements starting at index 1, then inserts « orange » and « grape ».
• The key point is that the original array is modified directly.

5.3 slice() Examples and Characteristics

Characteristics:

• The original array does not change (a non-destructive method).
• Used to extract elements into a new array.

Example 1: Extracting a portion with slice()

let fruits = ["apple", "banana", "cherry", "date"];
let result = fruits.slice(1, 3); // Extracts elements from index 1 up to (but not including) 3
console.log(result); // ["banana", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry", "date"]

Explanation:

• Elements in the range [1, 3) are returned as a new array.
• The original array remains unchanged.

5.4 How to Choose Between splice() and slice()

1. Use splice() when you want to modify the array

Example: Removing an unnecessary item from a list

let tasks = ["task1", "task2", "task3"];
tasks.splice(1, 1); // Removes the item at index 1
console.log(tasks); // ["task1", "task3"]

2. Use slice() when you want a subset without changing the original array

Example: Saving only part of an array separately

let data = [10, 20, 30, 40, 50];
let subset = data.slice(1, 4); // Extracts elements from index 1 up to 4 (exclusive)
console.log(subset); // [20, 30, 40]
console.log(data); // [10, 20, 30, 40, 50] (unchanged)

5.5 Practical Code Example: splice() vs slice()

The following code helps you see the difference between splice and slice more clearly.

let items = ["A", "B", "C", "D", "E"];

// splice: destructive (mutates the original array)
let removed = items.splice(1, 2); // Removes "B" and "C"
console.log(items); // ["A", "D", "E"]
console.log(removed); // ["B", "C"]

// slice : non destructif (ne modifie pas le tableau original)
let extracted = items.slice(0, 2); // Extrait les éléments de l'index 0 jusqu'à 2 (exclus)
console.log(items); // ["A", "D", "E"] (inchangé)
console.log(extracted); // ["A", "D"]

Key points:

• splice directly edits the original array, and returns the removed elements.
• slice keeps the original array intact and returns a new array.

6. splice() vs split(): Avoid Confusing Array Editing with String Splitting

JavaScript provides many methods for working with arrays and strings. Among them, split() looks similar to splice(), so they’re often confused—but they do completely different things. In this section, we’ll clarify the differences between split() and splice() to help you avoid common mistakes.

6.1 What Is split()?

split() is a string method that splits a string using a delimiter and returns an array.

Basic Syntax

string.split(séparateur, limite);

Parameter Details

1. separator (Required):

• A delimiter string or a regular expression used to split the string.

1. limit (Optional):

• The maximum number of elements to include in the returned array.

6.2 split() Examples

Example 1: Split a comma-separated string

let text = "apple,banana,cherry,date";
let result = text.split(","); // délimiteur est ","
console.log(result); // ["apple", "banana", "cherry", "date"]

Example 2: Split a string by spaces

let sentence = "Hello World JavaScript";
let words = sentence.split(" "); // délimiteur est un espace
console.log(words); // ["Hello", "World", "JavaScript"]

Example 3: Split using a regular expression

let data = "2024/12/31";
let parts = data.split(/[-/]/); // diviser par "-" ou "/"
console.log(parts); // ["2024", "12", "31"]

6.3 Key Differences Between splice() and split()

Here’s a table comparing splice and split side by side.

6.4 When to Use splice() vs split()

1. Use splice() when you want to edit an array

Example: Remove an unnecessary item from an array

let colors = ["red", "blue", "green"];
colors.splice(1, 1); // Supprime l'élément à l'index 1
console.log(colors); // ["red", "green"]

2. Use split() when you want to convert a string into an array

Example: Split a sentence into words

let sentence = "I love JavaScript";
let words = sentence.split(" ");
console.log(words); // ["I", "love", "JavaScript"]

6.5 Combining split() and splice(): A Practical Example

Here’s a useful pattern: split a string into an array, then edit the array with splice().

Example: Split string data and then edit it

let data = "apple,banana,cherry,date";

// 1. Utiliser split() pour convertir la chaîne en tableau
let fruits = data.split(","); // ["apple", "banana", "cherry", "date"]

// 2. Utiliser splice() pour modifier le tableau
fruits.splice(2, 1, "grape"); // Remplace "cherry" par "grape"
console.log(fruits); // ["apple", "banana", "grape", "date"]

Key points:

• split converts a string into an array so it’s easier to work with.
• splice performs the needed edits (insert / delete / replace) on the array.

7. Important Notes When Using splice()

JavaScript’s splice() method is powerful, but depending on how you use it, it can cause unexpected behavior, errors, or performance issues. In this section, we’ll cover key cautions and best practices to help you use splice() safely and effectively.

7.1 Be Careful: splice() Mutates the Original Array

Problem: Risk of data loss due to destructive behavior

splice() modifies the original array directly. If you want to preserve the original data, you may accidentally lose it.

Example: The original array gets changed

let numbers = [1, 2, 3, 4];
let removed = numbers.splice(1, 2); // Removes 2 elements starting at index 1
console.log(numbers); // [1, 4] (original array is changed)
console.log(removed); // [2, 3] (removed elements)

Solution : Copier le tableau avant de le modifier

let numbers = [1, 2, 3, 4];
let copy = [...numbers]; // Copy the array
copy.splice(1, 2); // Edit the copy
console.log(numbers); // [1, 2, 3, 4] (original array is unchanged)
console.log(copy); // [1, 4]

7.2 Attention aux problèmes de performance

Problème : Coût élevé lors de la modification de grands tableaux

splice() peut déclencher un décalage des éléments et une réindexation lors de l’insertion ou de la suppression d’éléments. Avec de grands tableaux, cela peut devenir lent.

Exemple : Modification d’un grand tableau

let bigArray = Array(1000000).fill(0);
console.time("splice");
bigArray.splice(500000, 1); // Removes one element in the middle
console.timeEnd("splice"); // Measure execution time

Solution : Utiliser un traitement par lots ou des approches alternatives

• Diviser le tableau et traiter de plus petits morceaux.
• Considérer des méthodes non destructives comme slice() ou concat() quand approprié.

7.3 Prévenir les erreurs causées par de mauvaises valeurs d’index

Problème : Les index hors plage peuvent mener à un comportement inattendu

Avec splice(), spécifier un index hors plage ne lève pas d’erreur. Cela peut rendre les bugs plus difficiles à remarquer.

Exemple : Index hors plage

let items = ["A", "B", "C"];
items.splice(5, 1); // Out-of-range index
console.log(items); // ["A", "B", "C"] (no error occurs)

Solution : Valider l’index avant d’appeler splice()

let items = ["A", "B", "C"];
let index = 5;

if (index < items.length) {
  items.splice(index, 1);
} else {
  console.log("The specified index is out of range.");
}

7.4 Utiliser la valeur de retour (Éléments supprimés)

Point clé : Les éléments supprimés sont retournés sous forme de tableau

splice() retourne les éléments supprimés sous forme de tableau. En utilisant cette valeur de retour, vous pouvez construire une logique plus flexible.

Exemple : Stocker les éléments supprimés dans un autre tableau

let tasks = ["task1", "task2", "task3"];
let removed = tasks.splice(1, 1); // Removes the element at index 1
console.log(removed); // ["task2"]

Utilisation pratique : Sauvegarder l’historique des suppressions

let history = [];
let tasks = ["task1", "task2", "task3"];

let removed = tasks.splice(1, 1);
history.push(...removed);

console.log(history); // ["task2"]

7.5 Éviter les erreurs en combinant splice() avec d’autres méthodes

• Utilisation de map() : Si vous voulez transformer chaque élément, utilisez map() au lieu de splice().
• Utilisation de filter() : Si vous voulez extraire des éléments basés sur une condition, utilisez filter() au lieu de splice().

Exemple : Extraire seulement les éléments qui correspondent à une condition

let numbers = [10, 20, 30, 40, 50];
let filtered = numbers.filter(num => num > 20);
console.log(filtered); // [30, 40, 50]

8. Résumé : Points clés pour maîtriser splice()

Jusqu’à présent, nous avons couvert la méthode splice() de JavaScript des bases aux cas d’utilisation avancés et aux précautions importantes. Dans cette section, nous réviserons ce que vous avez appris et organiserons les points clés que vous pouvez appliquer dans de vrais projets.

8.1 Récapitulatif rapide des bases de splice()

• Objectif : Une méthode qui peut supprimer, insérer et remplacer des éléments dans un tableau.
• Syntaxe :

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

• Principales fonctionnalités :

1. Supprimer des éléments → Supprimer les données inutiles.
2. Insérer des éléments → Ajouter de nouvelles données à une position spécifique.
3. Remplacer des éléments → Changer les données existantes en valeurs différentes.

Exemple : Opérations de base (supprimer / insérer / remplacer)

let data = ["A", "B", "C", "D"];

// Delete
data.splice(1, 2); // ["A", "D"]

// Insert
data.splice(1, 0, "X", "Y"); // ["A", "X", "Y", "D"]

// Replace
data.splice(2, 1, "Z"); // ["A", "X", "Z", "D"]

C’est pourquoi splice() est si utile—cela vous permet d’écrire des modifications de tableau de manière compacte et lisible.

8.2 Revoir les différences avec d’autres méthodes

1. splice() vs slice()

• splice() : Modifie le tableau original (destructif) → idéal pour l’édition.
• slice() : Ne modifie pas le tableau original (non destructif) → idéal pour l’extraction.

1. splice() vs split()

• splice() : Une méthode pour modifier les tableaux.
• split() : Une méthode pour diviser des chaînes en tableaux.

8.3 Résumé des cas d’utilisation pratiques

• Gestion des données de formulaire : Ajouter ou supprimer des champs pour créer des formulaires dynamiques.
• Édition des données de tableau : Insérer ou supprimer des lignes pour des mises à jour flexibles du tableau.
• Traitement des données : Modifier efficacement des ensembles de données JSON ou basés sur des objets.

8.4 Bonnes pratiques et précautions clés

• Soyez prudent avec les modifications destructives : Puisque splice() modifie le tableau original, créez une copie si nécessaire.
• Conscience des performances : Pour de grands ensembles de données, envisagez des opérations plus petites ou des méthodes alternatives.
• Prévention des erreurs : Validez les plages d’index et ajoutez des vérifications si nécessaire.
• Utilisez la valeur de retour : Suivez les éléments supprimés pour les journaux ou l’historique.
• Envisagez d’autres méthodes : Utilisez filter() ou map() lorsqu’elles correspondent mieux à votre objectif.

8.5 Comment continuer à améliorer vos compétences avec splice()

1. Apprenez en écrivant du vrai code

• Essayez d’utiliser splice() dans des scénarios quotidiens pour gagner en confiance grâce à la pratique.

2. Apprenez les méthodes de tableau associées ensemble

• filter : Extraire les éléments qui correspondent à une condition.
• map : Transformer chaque élément d’un tableau.
• reduce : Agréger les valeurs en un seul résultat.

3. Utilisez la documentation officielle et des ressources fiables

• Consultez MDN Web Docs pour les dernières mises à jour.
• Explorez davantage d’exemples et de comparaisons avec d’autres méthodes de tableau.

Résumé et prochaines étapes

Dans cet article, nous avons expliqué les sujets suivants concernant la méthode splice() de JavaScript :

1. Syntaxe de base et fonctionnement des paramètres
2. Exemples concrets de suppression, d’insertion et de remplacement d’éléments
3. Différences avec d’autres méthodes (slice, split) et comment choisir
4. Mises en garde importantes, prévention des erreurs et conseils de performance

splice() est un outil extrêmement puissant pour la manipulation de tableaux en JavaScript. Une fois que vous savez l’utiliser correctement, votre code devient beaucoup plus efficace et flexible.

Ensuite, essayez d’exécuter les exemples de code de cet article dans votre propre environnement. Plus vous pratiquez, plus vous serez à l’aise avec l’édition de tableaux, ce qui améliorera directement vos compétences en JavaScript.

9. Foire aux questions (FAQ) : Questions courantes sur splice()

Voici quelques-unes des questions les plus fréquentes et leurs réponses concernant la méthode splice() de JavaScript. Ces FAQ aident les débutants et les développeurs intermédiaires à dissiper les doutes et à approfondir leur compréhension.

Q1. splice() modifie-t-il le tableau original ?

R. Oui. splice() modifie directement le tableau original.
La méthode splice() est considérée comme destructrice car elle modifie le contenu du tableau après l’opération.

Exemple :

let colors = ["red", "blue", "green"];
colors.splice(1, 1); // Removes the element at index 1
console.log(colors); // ["red", "green"]

Q2. Quelle est la différence entre splice() et slice() ?

R. splice() modifie le tableau original, tandis que slice() ne le fait pas.

Exemple : slice() est non destructif

let colors = ["red", "blue", "green"];
let newColors = colors.slice(1, 2);
console.log(colors);    // ["red", "blue", "green"]
console.log(newColors); // ["blue"]

Q3. Comment ajouter des éléments avec splice() ?

R. Définissez le deuxième argument (deleteCount) à 0 pour insérer des éléments.

Exemple : Insérer des éléments

let fruits = ["apple", "banana"];
fruits.splice(1, 0, "grape", "orange");
console.log(fruits); // ["apple", "grape", "orange", "banana"]

Q4. Comment supprimer le dernier élément avec splice() ?

A. Utilisez -1 comme indice de départ, ou calculez le dernier indice en utilisant la longueur du tableau.

Exemple :

let numbers = [1, 2, 3, 4];
numbers.splice(-1, 1);
console.log(numbers); // [1, 2, 3]

Q5. Puis-je rechercher un élément et le supprimer avec splice()?

A. Oui. Trouvez d’abord l’indice, puis supprimez-le avec splice().

Exemple : Recherche par valeur et suppression

let fruits = ["apple", "banana", "cherry"];
let index = fruits.indexOf("banana");
if (index !== -1) {
  fruits.splice(index, 1);
}
console.log(fruits); // ["apple", "cherry"]

Q6. À quoi dois-je faire attention lors de l’utilisation de splice() avec de grands ensembles de données?

A. Soyez conscient des coûts de performance et envisagez de traiter les données par petits morceaux.

Exemple : Mesure des performances

let bigArray = Array(100000).fill(0);
console.time("splice");
bigArray.splice(50000, 1000);
console.timeEnd("splice");

Q7. Comment remplacer plusieurs éléments avec splice()?

A. Passez plusieurs nouveaux éléments à partir du troisième argument.

Exemple : Remplacer plusieurs éléments

let numbers = [1, 2, 3, 4];
numbers.splice(1, 2, 5, 6, 7);
console.log(numbers); // [1, 5, 6, 7, 4]

Résumé

Cette section FAQ a couvert à la fois les questions de base et avancées concernant splice().

Principaux enseignements :

• splice() modifie le tableau original, donc utilisez-le avec précaution.
• Comprendre les différences entre slice() et split() aide à éviter la confusion.
• Prenez en compte les performances et la prévention des erreurs pour écrire un code plus sûr.

Utilisez ces FAQ comme référence pendant que vous testez les exemples de code et approfondissez votre compréhension de splice().

10. Résumé final : Points clés et prochaines étapes d’apprentissage

Dans cet article, nous avons fourni une explication complète de la méthode splice() de JavaScript. Nous avons couvert tout, des bases aux cas d’utilisation réels et aux questions fréquentes, afin que les lecteurs puissent comprendre pleinement le fonctionnement de splice(). Cette section finale passe en revue l’ensemble de l’article et suggère ce qu’il faut apprendre ensuite.

10.1 Points clés de splice()

• splice() est une méthode utilisée pour supprimer, insérer et remplacer des éléments dans un tableau.
• Syntaxe :

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

• Principaux cas d’utilisation :
• Suppression d’éléments
• Insertion d’éléments
• Remplacement d’éléments

10.2 Scénarios courants d’utilisation de splice()

• Gestion des données de formulaire : idéal pour ajouter ou supprimer des champs.
• Opérations sur les tableaux dynamiques : utile pour insérer ou supprimer des lignes.
• Prétraitement des données : aide à modifier les ensembles de données JSON et les enregistrements basés sur des objets.

10.3 splice() comparé à d’autres méthodes de tableau

• splice() vs slice() : splice() modifie le tableau original, alors que slice() ne le fait pas.
• splice() vs split() : split() est destiné aux chaînes et crée des tableaux en découpant le texte.
• splice() vs map() / filter() : Utilisez map() et filter() pour les transformations et le filtrage, et utilisez splice() pour les modifications directes de tableau.

10.4 Prochaines étapes d’apprentissage

1. Écrire du code pratique : Essayez les exemples de cet article et prenez l’habitude de coder régulièrement.
2. Apprendre d’autres méthodes de tableau : Étudiez map(), filter(), reduce() et entraînez-vous à les combiner avec splice().
3. Appliquer splice() dans des projets réels : Utilisez-le pour des manipulations de tableau plus avancées dans vos propres applications.
4. Restez à jour : Suivez MDN et d’autres ressources officielles pour découvrir les nouvelles fonctionnalités et améliorations.

10.5 Mot de la fin

splice() est l’une des méthodes de tableau les plus puissantes et les plus utilisées en JavaScript. En appliquant ce que vous avez appris dans cet article à des projets réels, vous renforcerez vos compétences et deviendrez plus efficace dans la gestion des données en JavaScript.

Maîtriser les opérations flexibles sur les tableaux améliorera considérablement votre productivité et votre confiance dans le développement JavaScript.