Jak usunąć element tablicy w TypeScript?


404

Mam tablicę, którą utworzyłem w TypeScript i ma właściwość, której używam jako klucza. Jeśli mam ten klucz, jak mogę usunąć z niego przedmiot?

Odpowiedzi:


639

Tak samo jak w JavaScript.

delete myArray[key];

Zauważ, że ustawia to element na undefined.

Lepiej użyć Array.prototype.splicefunkcji:

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

8
Możesz dodać do tego typ! var index: number = myArray.indexOf(key, 0);
— CorayThan,

17
@CorayThan Na pewno byłby domyślnie wpisany jako indexOfzwrot a number?
— Chris

5
@Chris Chociaż w tym prostym przypadku jest to oczywiste, może pomóc w szybszym diagnozowaniu błędów, jeśli jawnie zdefiniujesz typ dla każdej zmiennej. Używasz już indexw więcej niż jednym miejscu i jedno z tych miejsc ( splice) chce zobaczyć numer lub otrzymasz błąd. Obecnie kompilator nie może zapobiec popełnieniu błędów.
— Jochem Kuijpers

33
@blorkfish warto wspomnieć, że jeśli masz listę obiektów, możesz użyć var index = myArray.findIndex(x => x.prop==key.prop);.
— Francisco Cabral

6
@ Cirelli94 - odpowiadasz na starszy wątek, ale odpowiedź na twoje pytanie brzmi: usunięcie elementu tablicy nie zmienia jego długości ani nie indeksuje tablicy ponownie. Ponieważ tablice są obiektami w JavaScripcie, delete myArr[2]dosłownie usuwa właściwość 2 o myArr, która jest inna niż myArr[2] = undefined. Morałem tej historii jest po prostu wykorzystanie splicedo tego zadania, ponieważ jest to bezpieczny sposób na uzyskanie pożądanego efektu bez mylących skutków ubocznych.
— winglerw28

200

Jeśli tablica jest typem obiektów, to najprostszym sposobem jest

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

20
Nie usuwa niczego, co po prostu filtruje. Jeśli lista rzeczywiście wymaga modyfikacji, to nie jest tak.
— user573434

6
@ user573434 tak, masz rację, jak wskazuje nazwa. Ale to proste podejście w przypadku, gdy chcesz usunąć obiekt po udanym usunięciu połączenia API itp.
— Malik Shahzad

3
Działa to dla mnie idealnie na szeregu obiektów bez unikalnej właściwości klucza. @ user573434 metoda filter zwraca nową tablicę bez filtrowanego obiektu, więc tablica wynikowa ma obiekt usunięty.
— Jason

6
myślę, że aby zwrócić obiekt jako przedmiot, musisz to zrobićthis.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
— Roel

1
To działa. po prostu uważnie przeczytaj drugą linię. robi filtr z obj! = foo_object. i przypisuje ją do oryginalnej zmiennej, zastępując w ten sposób oryginalną tablicę jednym minus odfiltrowany obiekt foo_object. użyłem go z tablicą obiektów o identyfikatorze deleteById(id: string) { this.data = this.data.filter(d => d.id !== id); }Jedno słowo ostrzeżenia, jeśli identyfikatory nie są unikalne, usuniesz wszystkie z tym samymid
— Markus

74

W ES6 możesz użyć tego kodu:

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

1
Najlepsze rozwiązanie do usunięcia bez zmiany odwołania do tablicy ORAZ z możliwością zaimplementowania określonego algorytmu równości
— Sid

1
Znaleziono najlepszą odpowiedź
— Gvs Akhil

1
Najlepsza odpowiedź, jeśli używasz ES6
— Nathan Beck

2
Możesz także użyć: this.documents.forEach ((item, index, array) => {if (item === doc) array.splice (index, 1);}); Co może być znacznie czystsze, szczególnie podczas pracy z zagnieżdżonymi tablicami.
— CGundlach

20

Oto moje rozwiązanie:

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

Zaletą tego rozwiązania jest to, że zadziała ono nawet wtedy, gdy równość obiektów nie zidentyfikuje dwóch obiektów jako równych.
— Brad Johnson

18

Możesz użyć splice metody z tablicy, aby usunąć elementy.

na przykład, jeśli masz tablicę z nazwą, arrużyj następującego polecenia:

arr.splice(2, 1);

więc tutaj element z indeksem 2 będzie punktem początkowym, a argument 2 określi, ile elementów należy usunąć.

Jeśli chcesz usunąć ostatni nazwany element tablicy, arrwykonaj następujące czynności:

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

Zwróci to arr z ostatnim elementem usuniętym.

Przykład:

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

1
Po prostu FYI, metoda łączenia modyfikuje tablicę (więc w tym przypadku usuwa ostatni element) i zwraca usunięte elementy, a nie samą tablicę.
— CGundlach

2
W rzeczywistości powinien to być arr.splice (arr.length-1,1), aby usunąć ostatni element.
— Steve W CO

15

niech departamenty to tablica. Chcesz usunąć element z tej tablicy.

departments: string[] = [];

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

8

Oto prosty jeden linijka do usuwania obiektu według właściwości z tablicy obiektów.

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

lub

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

1
Problem z pierwszym rozwiązaniem polega na tym, że delete usuwa element, ale rozmiar tablicy pozostaje taki sam jak przed detelacją. W drugim rozwiązaniu będziemy mieli nowy obiekt, więc jeśli mamy zależność od SPME, to tracimy ją. Łączenie (które znajduje się w górnej odpowiedzi) nie ma tego efektu.
— Krystian

Dzięki za zwrócenie na to uwagi. Myślę, że w moim przypadku użycia jeszcze tego nie odkryłem. Dobrze obserwowane :)
— Jamie Armor,

5

Odpowiedz za pomocą operatora rozprzestrzeniania 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

Jeszcze jedno rozwiązanie za pomocą Typescript:

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

Chociaż rozwiązuje to zadany problem, jego wykonanie jest kosztowne ze względu na utworzenie nowej tablicy i zapętlenie oryginału. Wykonywanie tego rodzaju operacji na ogromnej tablicy może powodować niepożądane skutki uboczne, takie jak trudniejsze w przypadku akumulatorów mobilnych, długie oczekiwanie, szarpnięcie itp.
— Jessy

1

Użyj tego, jeśli chcesz usunąć dany obiekt z tablicy i chcesz mieć pewność, że:

  • lista nie jest ponownie inicjowana
  • długość tablicy jest odpowiednio zaktualizowana
    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }

0

Chciałem tylko dodać metodę rozszerzenia dla tablicy.

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;
    };
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.