Supprimer un élément d’un tableau en Javascript

Supprimer un élément d’un tableau avec son index

En Javascript, on peut supprimer un élément d’un tableau grâce à son index. Pour cela, on peut utiliser la méthode splice.

Dans l’exemple ci-dessous, nous voulons supprimer la couleur bleue qui se trouve à l’index 2 de notre tableau.

Nous pouvons utiliser les deux premiers paramètres de la méthode splice. Le premier indique la position à laquelle nous souhaitons supprimer un élément et le second indique combien d’éléments nous souhaitons supprimer (Dans notre cas, l’index est 2 et le nombre d’éléments à retirer est 1).

const colors = ['red', 'green', 'blue', 'yellow']
colors.splice(2, 1)

console.log(colors)
// Output: ['red', 'green', 'yellow']

On peut suivre le même exemple si l’on souhaite supprimer un objet dans un tableau. La seule différence est que c’est un tableau d’objet. Mais à partir du moment où on utilise un index pour supprimer un élément, cela fonctionnera peu importe la nature de l’élément.

La méthode splice est aussi utile si l’on souhaite remplacer un élément dans un tableau Javascript.

Attention: Lorsque l'on utilise la méthode splice, on modifie le tableau original.

Supprimer un élément d’un tableau par sa valeur

Si on souhaite supprimer un élément d’un tableau en Javascript, on peut le faire par sa valeur.

En reprenant l’exemple au-dessus, nous voulons cette fois supprimer la couleur verte.

La fonction Javascript filter nous permet de garder uniquement les valeurs qui répondent vrai à la condition que l’on indique.

Exemple :

const colors = ['red', 'green', 'blue', 'yellow']
const filteredColors = colors.filter((color) => color !== 'green')

console.log(filteredColors)
// Output: ['red', 'blue', 'yellow']

Supprimer un objet dans un tableau par sa valeur

La méthode filter fonctionne aussi avec les objets. Par exemple, si on veut supprimer la personne avec le nom ‘Bob’, on peut écrire :

const persons = [
  {
    id: 1,
    name: 'Roger',
  },
  {
    id: 2,
    name: 'Romane',
  },
  {
    id: 3,
    name: 'Bob',
  },
]

const filteredPersons = persons.filter((person) => person.name !== 'Bob')

console.log(filteredPersons)
// Output:
// [
//   { id: 1, name: 'Roger' },
//   { id: 2, name: 'Romane' }
// ]

Voici une ressource pour en savoir plus sur comment filtrer un tableau en Javascript.

Supprimer le premier élément d’un tableau en Javascript

Si on souhaite supprimer le premier élément d’un tableau, on peut utiliser la méthode filter tel que vu précédemment. Mais on peut aussi le faire plus rapidement avec la méthode shift.

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

colors.shift()

console.log(colors)
// Output: ['green', 'blue', 'yellow']

On peut aussi utiliser la méthode shift pour supprimer le premier élément d’une chaîne de caractères.

Attention: Lorsque l'on utilise la méthode shift, on modifie le tableau original.

Supprimer le dernier élément d’un tableau

Si on souhaite supprimer le dernier élément d’un tableau, on peut, encore une fois, utiliser la méthode splice mais qui nous oblige à faire des calculs pour trouver le dernier index.

Heureusement, la méthode pop est là pour nous simplifier la vie.

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

colors.pop()

console.log(colors)
// Output: ['red', 'green', 'blue']

La méthode pop est aussi utile si l’on souhaite supprimer le dernier élément d’une chaîne de caractère.

Attention: Lorsque l'on utilise la méthode pop, on modifie le tableau original.