Comment supprimer un élément de tableau dans TypeScript?

408

J'ai un tableau que j'ai créé en TypeScript et il a une propriété que j'utilise comme clé. Si j'ai cette clé, comment puis-je en supprimer un élément?

Tim Almond
la source

Réponses:

642

De la même manière que vous le feriez en JavaScript.

delete myArray[key];

Notez que cela définit l'élément sur undefined.

Mieux vaut utiliser la Array.prototype.splicefonction:

const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}
poisson bleu
la source
8
Vous pouvez ajouter un type à cela! var index: number = myArray.indexOf(key, 0);
CorayThan
17
@CorayThan Ce serait sûrement implicitement tapé comme indexOfretourne un number?
Chris
5
@Chris Bien qu'il soit évident dans ce cas simple, il peut vous aider à diagnostiquer les bogues plus rapidement si vous définissez explicitement un type pour chaque variable. Vous utilisez déjà indexplus d'une fois un lieu et l'un de ces endroits ( splice) veut voir un nombre ou vous obtiendrez une erreur. Actuellement, le compilateur ne peut pas vous empêcher de faire des erreurs.
Jochem Kuijpers
33
@blorkfish, il est bon de mentionner que si vous avez une liste d'objets, vous pouvez l'utiliser var index = myArray.findIndex(x => x.prop==key.prop);.
Francisco Cabral
6
@ Cirelli94 - vous répondez à un fil plus ancien, mais la réponse à votre question est que la suppression d'un élément de tableau ne modifie pas sa longueur ni ne réindexe le tableau. Parce que les tableaux sont des objets en JavaScript, delete myArr[2]supprime littéralement la propriété 2 de myArr, qui est également différente de myArr[2] = undefined. La morale de cette histoire est de simplement l'utiliser splicepour cette tâche, car c'est un moyen sûr d'obtenir l'effet souhaité sans confondre les effets secondaires.
winglerw28
200

Si tableau est un type d'objets, alors la manière la plus simple est

let foo_object // Item to remove
this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object);
Malik Shahzad
la source
20
Cela ne supprime rien qu'il filtre simplement. Si la liste doit réellement être modifiée, ce n'est pas le cas.
user573434
6
@ user573434 oui, vous avez raison, comme son nom l'indique. Mais c'est une approche simple dans le cas où vous souhaitez supprimer un objet lors d'un appel de suppression d'API réussi, etc.
Malik Shahzad
3
Cela a parfaitement fonctionné pour moi sur un tableau d'objets sans propriété de clé unique. @ user573434 la méthode de filtrage renvoie un nouveau tableau sans l'objet filtré, donc le tableau résultant a l'objet supprimé.
Jason
6
je pense que pour le rendre en tant qu'objet, vous devez le fairethis.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
Roel
1
Cela marche. il suffit de lire attentivement la 2e ligne. il fait un filtre avec obj! = foo_object. et l'assigne à la variable d'origine, remplaçant ainsi le tableau d'origine par un moins le foo_object filtré. utilisé avec un tableau d'objets avec id deleteById(id: string) { this.data = this.data.filter(d => d.id !== id); }Un seul mot d'avertissement, si les ID ne sont pas uniques, vous les supprimerez tous avec le mêmeid
Markus
74

Avec ES6, vous pouvez utiliser ce code:

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}
Idak
la source
1
Meilleure solution pour supprimer sans changer la référence de tableau ET avec possibilité d'implémenter un algorithme d'égalité spécifique
Sid
1
Meilleure réponse trouvée
Gvs Akhil
1
Meilleure réponse si vous utilisez ES6
Nathan Beck
2
Vous pouvez également utiliser: this.documents.forEach ((item, index, array) => {if (item === doc) array.splice (index, 1);}); Ce qui peut être beaucoup plus propre, surtout lorsque vous travaillez avec des tableaux imbriqués.
CGundlach
20

C'est ma solution pour ça:

onDelete(id: number) {
    this.service.delete(id).then(() => {
        let index = this.documents.findIndex(d => d.id === id); //find index in your array
        this.documents.splice(index, 1);//remove element from array
    });

    event.stopPropagation();
}
Butsaty
la source
Ce qui est bien avec cette solution, c'est qu'elle fonctionnera même lorsque l'égalité des objets ne parvient pas à identifier deux objets comme égaux.
Brad Johnson
18

Vous pouvez utiliser le splice méthode sur un tableau pour supprimer les éléments.

par exemple, si vous avez un tableau avec le nom, arrutilisez ce qui suit:

arr.splice(2, 1);

ici, l'élément avec l'index 2 sera le point de départ et l'argument 2 déterminera le nombre d'éléments à supprimer.

Si vous souhaitez supprimer le dernier élément du tableau nommé, arrprocédez comme suit:

arr.splice(arr.length-1, 1);

Cela renverra arr avec le dernier élément supprimé.

Exemple:

var arr = ["orange", "mango", "banana", "sugar", "tea"];
arr.splice(arr.length-1, 1)
console.log(arr); // return ["orange", "mango", "banana", "sugar"]
akash venugopal
la source
1
Juste pour info, la méthode d'épissage modifie le tableau (donc dans ce cas, supprime le dernier élément) et renvoie les éléments supprimés, pas le tableau lui-même.
CGundlach
2
Il devrait en fait être arr.splice (arr.length-1,1) pour supprimer le dernier élément.
Steve In CO
15

laisser les ministères est un tableau. Vous souhaitez supprimer un élément de ce tableau.

departments: string[] = [];

 removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }
Abdus Salam Azad
la source
8

Voici un simple liner pour supprimer un objet par propriété d'un tableau d'objets.

delete this.items[this.items.findIndex(item => item.item_id == item_id)];

ou

this.items = this.items.filter(item => item.item_id !== item.item_id);
Jamie Armor
la source
1
Le problème avec la première solution est que la suppression supprime l'élément, mais la taille du tableau reste la même qu'avant la suppression. Dans la deuxième solution, nous aurons un nouvel objet, donc si nous avons une dépendance spme, nous le perdons. L'épissure (qui est dans la première réponse) n'a pas cet effet.
Krystian
Merci d'avoir fait remarquer cela. Je pense que dans mon cas d'utilisation, je ne l'avais pas encore découvert. Bien observé :)
Jamie Armor
5

Répondre à l'aide de l'opérateur d'étalement TypeScript (...)

// Your key
const key = 'two';

// Your array
const arr = [
    'one',
    'two',
    'three'
];

// Get either the index or -1
const index = arr.indexOf(key); // returns 0


// Despite a real index, or -1, use spread operator and Array.prototype.slice()    
const newArray = (index > -1) ? [
    ...arr.slice(0, index),
    ...arr.slice(index + 1)
] : arr;
Joshua Michael Waggoner
la source
5

Encore une solution en utilisant Typescript:

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;
Sh. Pavel
la source
Bien que cela résout le problème posé, son exécution est coûteuse en raison de la création d'un nouveau tableau et du bouclage sur l'original. Faire ce genre d'opération sur une vaste gamme pourrait produire des effets secondaires indésirables comme, plus dur sur les batteries mobiles, longue attente, branlante, etc.
Jessy
1

Utilisez-le si vous devez supprimer un objet donné d'un tableau et que vous voulez être sûr de ce qui suit:

  • la liste n'est pas réinitialisée
  • la longueur du tableau est correctement mise à jour
    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }
Radu Linu
la source
0

Je voulais juste ajouter une méthode d'extension pour un tableau.

interface Array<T> {
      remove(element: T): Array<T>;
    }

    Array.prototype.remove = function (element) {
      const index = this.indexOf(element, 0);
      if (index > -1) {
        return this.splice(index, 1);
      }
      return this;
    };
supernerd
la source