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.