Comment puis-je supprimer un élément spécifique d'un tableau ?

Question

Comment supprimer une valeur spécifique d'un tableau ? Quelque chose comme :

array.remove(value);  // removes all elements with value

Je dois utiliser noyau dur JavaScript. Les frameworks ne sont pas autorisés.

Answer 1

Trouvez le index de l'élément du tableau que vous voulez supprimer en utilisant indexOf puis supprimer cet index avec splice .

La méthode splice() modifie le contenu d'un tableau en supprimant les éléments suivants éléments existants et/ou en ajoutant de nouveaux éléments.

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1); // 2nd parameter means remove one item only
}

// array = [2, 9]
console.log(array); 

Le deuxième paramètre de splice est le nombre d'éléments à supprimer. Notez que splice modifie le tableau en place et renvoie un nouveau tableau contenant les éléments qui ont été supprimés.

---

Pour des raisons d'exhaustivité, voici les fonctions. La première fonction ne supprime qu'une seule occurrence (c'est-à-dire qu'elle supprime la première correspondance de 5 de [2,5,9,1,5,8,5] ), tandis que la seconde fonction supprime toutes les occurrences :

function removeItemOnce(arr, value) {
  var index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

function removeItemAll(arr, value) {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}
// Usage
console.log(removeItemOnce([2,5,9,1,5,8,5], 5))
console.log(removeItemAll([2,5,9,1,5,8,5], 5))

En TypeScript, ces fonctions peuvent rester sûres grâce à un paramètre de type :

function removeItem<T>(arr: Array<T>, value: T): Array<T> { 
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

Answer 2

Édité le 2016 octobre

• Faites-le de manière simple, intuitive et explicite ( Le rasoir d'Occam )
• Le rendre immuable (le tableau original reste inchangé)
• Faites-le avec les fonctions JavaScript standard, si votre navigateur ne les prend pas en charge. utiliser le polyfill

Dans cet exemple de code, j'utilise array.filter(...) pour supprimer les éléments indésirables d'un tableau. Cette fonction ne modifie pas le tableau original et en crée un nouveau. Si votre navigateur ne prend pas en charge cette fonction (par exemple, Internet Explorer avant la version 9, ou Firefox avant la version 1.5), envisagez de recourir à polyfilling avec core-js .

Suppression de l'élément (code ECMA-262 Edition 5 AKA vieux style JavaScript)

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) {
    return item !== value
})

console.log(arr)
// [ 1, 2, 4, 5 ]

Suppression d'un élément (code ECMAScript 6)

let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 2, 4, 5 ]

IMPORTANT ECMAScript 6 () => {} La syntaxe de la fonction flèche n'est pas du tout prise en charge par Internet Explorer, Chrome avant la version 45, Firefox avant la version 22 et Safari avant la version 10. Pour utiliser la syntaxe ECMAScript 6 dans les anciens navigateurs, vous pouvez utiliser BabelJS .

---

Suppression de plusieurs éléments (code ECMAScript 7)

Un autre avantage de cette méthode est que vous pouvez supprimer plusieurs éléments.

let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

IMPORTANT array.includes(...) n'est pas du tout prise en charge par Internet Explorer, Chrome avant la version 47, Firefox avant la version 43, Safari avant la version 9, et Edge avant la version 14 mais vous pouvez polyfill avec core-js .

Suppression de plusieurs éléments (dans le futur, peut-être)

Si le "Syntaxe de cette liaison" est acceptée, vous serez en mesure de le faire :

// array-lib.js

export function remove(...forDeletion) {
    return this.filter(item => !forDeletion.includes(item))
}

// main.js

import { remove } from './array-lib.js'

let arr = [1, 2, 3, 4, 5, 3]

// :: This-Binding Syntax Proposal
// using "remove" function as "virtual method"
// without extending Array.prototype
arr = arr::remove(2, 3, 5)

console.log(arr)
// [ 1, 4 ]

Essayez-le vous-même dans BabelJS :)

Référence

• Array.prototype.includes
• Composition fonctionnelle

Answer 3

Je ne sais pas comment tu espères array.remove(int) pour se comporter. Il y a trois possibilités auxquelles je pense que vous pourriez vouloir.

Pour supprimer un élément d'un tableau à un indice donné i :

array.splice(i, 1);

Si vous voulez supprimer tous les éléments ayant une valeur number du tableau :

for (var i = array.length - 1; i >= 0; i--) {
 if (array[i] === number) {
  array.splice(i, 1);
 }
}

Si vous voulez juste faire l'élément à l'indice i n'existent plus, mais vous ne voulez pas que les index des autres éléments changent :

delete array[i];

Answer 4

Cela dépend si vous voulez garder une place vide ou non.

Si vous faire veulent un emplacement vide :

array[index] = undefined;

Si vous Ne le fais pas. veulent un emplacement vide :

//To keep the original:
//oldArray = [...array];

//This modifies the array.
array.splice(index, 1);

Et si vous avez besoin de la valeur de cet élément, vous pouvez simplement stocker l'élément du tableau retourné :

var value = array.splice(index, 1)[0];

Si vous voulez supprimer à l'une des extrémités du tableau, vous pouvez utiliser array.pop() pour le dernier ou array.shift() pour le premier (les deux renvoient également la valeur de l'élément).

Si vous ne connaissez pas l'index de l'élément, vous pouvez utiliser array.indexOf(item) pour l'obtenir (dans un if() pour obtenir un article ou dans un while() pour les obtenir tous). array.indexOf(item) renvoie soit l'indice, soit -1 si elle n'est pas trouvée.

Answer 5

Un ami avait des problèmes dans Internet Explorer 8 et m'a montré ce qu'il faisait. Je lui ai dit que c'était faux, et il m'a dit qu'il avait trouvé la réponse ici. La réponse actuelle en haut de page ne fonctionne pas dans tous les navigateurs (Internet Explorer 8 par exemple), et elle ne supprime que la première occurrence de l'élément.

Suppression de TOUTES les instances d'un tableau

function removeAllInstances(arr, item) {
   for (var i = arr.length; i--;) {
     if (arr[i] === item) arr.splice(i, 1);
   }
}

Il boucle dans le tableau à l'envers (puisque les indices et la longueur changent au fur et à mesure que les éléments sont supprimés) et supprime l'élément s'il est trouvé. Elle fonctionne dans tous les navigateurs.