Comment supprimer un élément du tableau JavaScript et Craft Clean Code

Les tableaux sont des structures de données fréquemment utilisées en JavaScript. Cet article explore les différentes méthodes pour supprimer des éléments d’un tableau, en mettant l’accent sur les techniques qui préservent l’intégrité du tableau initial et celles qui le modifient directement.

En JavaScript, un tableau est un objet global utilisé pour stocker des collections de données. Il peut contenir des listes d’éléments de différents types, voire des listes vides. L’accès aux éléments d’un tableau se fait par leur indice numérique, commençant à zéro.

Dans ce guide, nous examinerons la syntaxe de base des tableaux en JavaScript, nous justifierons la nécessité de supprimer des éléments, et nous détaillerons plusieurs approches pour retirer des éléments, avec ou sans modification du tableau original.

Structure d’un tableau en JavaScript

Les tableaux permettent de regrouper plusieurs valeurs au sein d’une seule variable. Par exemple, pour représenter les sept continents, nous pourrions écrire :

const continent1 = "Asie";
const continent2 = "Afrique";
const continent3 = "Amérique du Nord";
const continent4 = "Amérique du Sud";
const continent5 = "Antarctique";
const continent6 = "Europe";
const continent7 = "Australie";

Cependant, cette approche est verbeuse. Il est plus concis de représenter ces données sous forme de tableau :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];

Au lieu de sept variables, nous utilisons une seule, avec des crochets pour délimiter les éléments.

Pour accéder au premier continent de la liste, on utilise la commande console.log(continents[0]).

Vous pouvez tester votre code en utilisant un compilateur JavaScript en ligne.

Si vous souhaitez obtenir le dernier élément du tableau, la commande sera console.log(continents[6]).

Il est essentiel de se rappeler que les indices de tableaux en JavaScript commencent à 0.

Pourquoi supprimer un élément d’un tableau en JavaScript ?

Les tableaux JavaScript peuvent contenir des chaînes de caractères, des nombres ou d’autres structures de données. Il arrive que la suppression d’un ou plusieurs éléments soit nécessaire. Voici quelques exemples :

• Gestion de données dynamiques : Les tableaux sont souvent utilisés pour stocker des données qui évoluent. La suppression d’éléments permet d’adapter le tableau aux nouvelles exigences.
• Intégrité des données : Supprimer les informations obsolètes permet de garantir que les données sont à jour.
• Gestion de la mémoire : En supprimant les données inutiles, vous pouvez réduire la taille de votre code et optimiser les performances de votre application.

Supprimer des éléments sans modifier le tableau original

Pour supprimer un élément sans altérer le tableau initial, la meilleure approche consiste à créer un nouveau tableau sans l’élément à supprimer. Cette pratique est particulièrement utile lorsque vous manipulez un tableau comme paramètre d’une fonction. Les méthodes suivantes peuvent être utilisées :

#1. Suppression via la méthode slice()

La méthode slice() permet de créer une copie d’un sous-ensemble du tableau. Nous pouvons utiliser cette approche pour retirer le premier continent de la liste.

Notre tableau initial est :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];

Créons un nouveau tableau sans le premier élément :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];
// Supprimer le premier élément avec slice
let newContinents = continents.slice(1);
console.log(newContinents);

Le résultat affiché est :

[
  'Afrique',
  'Amérique du Nord',
  'Amérique du Sud',
  'Antarctique',
  'Europe',
  'Australie'
]

#2. Suppression via la méthode filter()

La méthode filter() crée un nouveau tableau en ne conservant que les éléments qui satisfont une condition donnée. Nous pouvons définir une condition qui exclut le premier élément du tableau. Voici comment procéder :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];
// Supprimer le premier élément avec filter()
let newContinents = continents.filter((continent, index) => index !== 0);
console.log(newContinents);

En exécutant ce code, on obtient :

[
  'Afrique',
  'Amérique du Nord',
  'Amérique du Sud',
  'Antarctique',
  'Europe',
  'Australie'
]

#3. Suppression à une position spécifique via slice() et concat()

Les exemples précédents suppriment uniquement le premier élément. Pour supprimer un élément à une position spécifique, comme le troisième ou le quatrième élément, nous devons combiner slice() avec concat(). L’exemple ci-dessous supprime le quatrième élément :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];
// Supprimer le quatrième élément avec slice et concat
let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4));
console.log(continentsWithoutFourth);

Le résultat de l’exécution est :

[
  'Asie',
  'Afrique',
  'Amérique du Nord',
  'Antarctique',
  'Europe',
  'Australie'
]

La méthode slice() crée deux sous-tableaux. La méthode concat() combine ces deux sous-tableaux, en omettant le quatrième élément. Cette technique peut être appliquée pour supprimer n’importe quel élément du tableau.

#4. Suppression via une boucle for et la méthode push()

Il est possible de retirer un élément en utilisant une boucle for combinée avec la méthode push(). Par exemple, pour omettre le cinquième élément de la liste :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];
// Supprimer le cinquième élément via boucle for et push
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
  if (i !== 4) {
    continentsWithoutFifth.push(continents[i]);
  }
}
console.log(continentsWithoutFifth);

La boucle for itère sur tous les éléments du tableau. L’instruction if vérifie si l’index actuel est différent de 4. Si la condition est remplie, l’élément est ajouté au nouveau tableau.

L’exécution de ce code donne le résultat :

[
  'Asie',
  'Afrique',
  'Amérique du Nord',
  'Amérique du Sud',
  'Europe',
  'Australie'
]

Supprimer des éléments en modifiant le tableau d’origine

Il est possible de supprimer des éléments en modifiant directement la structure du tableau original. Voici quelques méthodes qui permettent de le faire :

#1. Suppression du dernier élément via la méthode pop()

La méthode pop() permet de supprimer le dernier élément d’un tableau. En partant du code initial :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];

Voici le code pour retirer le dernier élément :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];
// Supprimer le dernier élément via pop
let lastContinent = continents.pop();
console.log("Tableau mis à jour :", continents);

La liste mise à jour sera :

Tableau mis à jour :
[
  'Asie',
  'Afrique',
  'Amérique du Nord',
  'Amérique du Sud',
  'Antarctique',
  'Europe'
]

Pour connaître l’élément supprimé, on peut utiliser le code suivant :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];
// Supprimer le dernier élément via pop
let lastContinent = continents.pop();
console.log("Continent supprimé :", lastContinent);

#2. Suppression d’un élément via la méthode splice()

La méthode splice() permet de supprimer des éléments à un index spécifique. Pour supprimer un élément à l’index 2 :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];
// Supprimer l'élément à l'index 2 via splice
let removedElement = continents.splice(2, 1);
console.log("Élément supprimé :", removedElement);
console.log("Tableau mis à jour :", continents);

Ce code modifie le tableau initial et renvoie un nouveau tableau. Les instructions console.log permettent de vérifier l’élément supprimé et le tableau mis à jour.

L’exécution du code donne le résultat suivant :

Élément supprimé : [ 'Amérique du Nord' ]
Tableau mis à jour :
[
  'Asie',
  'Afrique',
  'Amérique du Sud',
  'Antarctique',
  'Europe',
  'Australie'
]

#3. Suppression du premier élément via la méthode shift()

La méthode shift() supprime le premier élément d’un tableau JavaScript. Cette méthode modifie le tableau initial et renvoie l’élément supprimé. En reprenant le tableau des continents :

Voici le code pour supprimer le premier élément :

let continents = ['Asie', 'Afrique', 'Amérique du Nord', 'Amérique du Sud', 'Antarctique', 'Europe', 'Australie'];
// Supprimer le premier élément via shift
let removedContinent = continents.shift();
console.log("Continent supprimé :", removedContinent);
console.log("Tableau mis à jour :", continents);

Les instructions console.log permettent d’afficher l’élément supprimé et le tableau mis à jour.

L’exécution du code donne ce résultat :

Continent supprimé : Asie
Tableau mis à jour :
[
  'Afrique',
  'Amérique du Nord',
  'Amérique du Sud',
  'Antarctique',
  'Europe',
  'Australie'
]

Ajouter un élément à un tableau en JavaScript

Bien que l’article traite de la suppression d’éléments, il est également utile de connaître les méthodes pour en ajouter. Voici quelques approches pour ajouter de nouveaux éléments :

#1. La méthode push()

Pour les exemples suivants, nous utiliserons le tableau de couleurs :

let colors = ['rouge', 'bleu', 'vert', 'jaune', 'violet'];

Pour ajouter une nouvelle couleur à la fin du tableau, on utilise push() :

let colors = ['rouge', 'bleu', 'vert', 'jaune', 'violet'];
// Ajouter une nouvelle couleur au tableau
colors.push('orange');

Le tableau contiendra désormais six couleurs.

#2. La méthode unshift()

Pour ajouter un nouvel élément au début du tableau, on utilise la méthode unshift(). En reprenant le tableau de couleurs :

let colors = ['rouge', 'bleu', 'vert', 'jaune', 'violet'];
// Ajouter une nouvelle couleur au début du tableau
colors.unshift('orange');
console.log(colors);

Comme le montre la capture d’écran, la couleur orange est ajoutée au début du tableau :

Conclusion

Vous avez maintenant une vue d’ensemble des techniques pour supprimer des éléments d’un tableau JavaScript, vous permettant de produire du code propre et efficace. Le choix de la méthode dépendra de vos objectifs, de vos compétences et de vos préférences.

La méthode slice() est particulièrement utile lorsque vous cherchez une méthode simple qui ne modifie pas le tableau original. La combinaison de slice() et concat() est quant à elle idéale pour supprimer un élément à une position spécifique.

Pour en savoir plus, n’hésitez pas à consulter notre article sur les aide-mémoire JavaScript pour les développeurs.