Come rimuovo un elemento dell'array in TypeScript?


407

Ho un array che ho creato in TypeScript e ha una proprietà che uso come chiave. Se ho quella chiave, come posso rimuovere un elemento da esso?

Risposte:


641

Come faresti con JavaScript.

delete myArray[key];

Si noti che questo imposta l'elemento su undefined.

Meglio usare la Array.prototype.splicefunzione:

const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}

8
Puoi aggiungere un tipo a quello! var index: number = myArray.indexOf(key, 0);
Coray del

17
@CorayThan Sicuramente verrebbe digitato implicitamente come indexOfrestituisce a number?
Chris,

5
@Chris Sebbene sia ovvio in questo semplice caso, può aiutarti a diagnosticare più rapidamente i bug se definisci esplicitamente un tipo per ogni variabile. Stai già utilizzando indexpiù di una volta e uno di quei posti ( splice) vuole vedere un numero o otterrai un errore. Attualmente il compilatore non può impedirti di fare errori lì.
Jochem Kuijpers,

33
@blorkfish è bene ricordare che se si dispone di un elenco di oggetti, è possibile utilizzare var index = myArray.findIndex(x => x.prop==key.prop);.
Francisco Cabral,

6
@ Cirelli94: stai rispondendo a un thread precedente, ma la risposta alla tua domanda è che l'eliminazione di un elemento dell'array non cambia la sua lunghezza o non reindicizza l'array. Poiché le matrici sono oggetti in JavaScript, delete myArr[2]elimina letteralmente la proprietà 2 di myArr, che è anche diversa da myArr[2] = undefined. La morale di questa storia è usare solo spliceper questo compito perché è un modo sicuro per ottenere l'effetto desiderato senza confondere gli effetti collaterali.
Winglerw28,

200

Se l'array è il tipo di oggetti, il modo più semplice è

let foo_object // Item to remove
this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object);

20
Questo non rimuove nulla semplicemente filtra. Se l'elenco deve effettivamente essere modificato, non è questo il modo.
user573434

6
@utente573434 sì, hai ragione, come indica il nome. Ma questo è un approccio semplice nel caso in cui si desidera rimuovere un oggetto in caso di eliminazione della chiamata api riuscita ecc.
Malik Shahzad,

3
Questo ha funzionato perfettamente per me su una serie di oggetti senza una proprietà chiave unica. @utente573434 il metodo di filtro restituisce un nuovo array senza l'oggetto filtrato, quindi all'array risultante viene rimosso l'oggetto.
Jason,

6
penso che per restituirlo come oggetto devi farlothis.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
Roel,

1
Questo funziona basta leggere attentamente la seconda riga. fa un filtro con obj! = foo_object. e lo assegna alla variabile originale, sostituendo così l'array originale con uno meno l'oggetto foo_object filtrato. usato con un array di oggetti con id deleteById(id: string) { this.data = this.data.filter(d => d.id !== id); }Solo una parola di avvertimento, se gli ID non sono univoci rimuoverai tutti con lo stessoid
Markus,

74

Con ES6 puoi usare questo codice:

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}

1
La migliore soluzione da rimuovere senza modificare il riferimento dell'array E con la possibilità di implementare l'algoritmo di uguaglianza specifica
Sid

1
Migliore risposta trovata
Gvs Akhil,

1
Migliore risposta se si utilizza ES6
Nathan Beck il

2
Puoi anche usare: this.documents.forEach ((item, index, array) => {if (item === doc) array.splice (index, 1);}); Che può essere molto più pulito, specialmente quando si lavora con array nidificati.
CGundlach,

20

È la mia soluzione per questo:

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();
}

La cosa bella di questa soluzione è che funzionerà anche quando l'uguaglianza degli oggetti non riesce a identificare due oggetti come uguali.
Brad Johnson,

18

È possibile utilizzare il splicemetodo su un array per rimuovere gli elementi.

ad esempio se si dispone di un array con il nome, arrutilizzare quanto segue:

arr.splice(2, 1);

quindi qui l'elemento con l'indice 2 sarà il punto di partenza e l'argomento 2 determinerà il numero di elementi da eliminare.

Se si desidera eliminare l'ultimo elemento dell'array denominato, arrprocedere come segue:

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

Questo restituirà arr con l'ultimo elemento eliminato.

Esempio:

var arr = ["orange", "mango", "banana", "sugar", "tea"];
arr.splice(arr.length-1, 1)
console.log(arr); // return ["orange", "mango", "banana", "sugar"]

1
Solo FYI, il metodo splice modifica l'array (quindi in questo caso rimuove l'ultimo elemento) e restituisce gli elementi rimossi, non l'array stesso.
CGundlach,

2
Dovrebbe effettivamente essere arr.splice (arr.length-1,1) per rimuovere l'ultimo elemento.
Steve In CO,

15

lascia che dipartimenti sia un array. Si desidera rimuovere un elemento da questo array.

departments: string[] = [];

 removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }

8

Ecco una semplice linea per rimuovere un oggetto per proprietà da una matrice di oggetti.

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

o

this.items = this.items.filter(item => item.item_id !== item.item_id);

1
Il problema con la prima soluzione è che delete rimuove l'elemento, ma la dimensione dell'array rimane la stessa di prima del rilevamento. Nella seconda soluzione avremo un nuovo oggetto, quindi se abbiamo la dipendenza da spme allora lo stiamo perdendo. Splice (che si trova nella risposta in alto) non ha questo effetto.
Krystian,

Grazie per la segnalazione. Penso che nel mio caso d'uso non lo avessi ancora scoperto. Ben osservato :)
Jamie Armor il

5

Risposta utilizzando l'operatore di diffusione 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;

5

Un'altra soluzione usando Typescript:

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;

Sebbene ciò risolva il problema richiesto, è costoso da eseguire a causa della creazione di un nuovo array e del looping sull'originale. Fare questo tipo di operazione su una vasta gamma potrebbe produrre effetti collaterali indesiderati come, più difficile sulle batterie mobili, lunga attesa, jank, ecc.
Jessy

1

Utilizzare questo, se è necessario rimuovere un determinato oggetto da un array e si desidera essere certi di quanto segue:

  • l'elenco non viene reinizializzato
  • la lunghezza dell'array viene aggiornata correttamente
    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }

0

Volevo solo aggiungere il metodo di estensione per un array.

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;
    };
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.