Bagaimana cara menghapus item array di TypeScript?

407

Saya memiliki array yang saya buat di TypeScript dan memiliki properti yang saya gunakan sebagai kunci. Jika saya memiliki kunci itu, bagaimana saya bisa menghapus item dari itu?

Tim Almond
sumber

Jawaban:

641

Cara yang sama seperti yang Anda lakukan dalam JavaScript.

delete myArray[key];

Perhatikan bahwa ini menyetel elemen ke undefined .

Lebih baik menggunakan Array.prototype.splicefungsi:

const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}
blorkfish
sumber
8
Anda dapat menambahkan tipe ke sana! var index: number = myArray.indexOf(key, 0);
CorayThan
17
@CorayThan Tentunya itu akan diketik secara implisit sebagai indexOfpengembalian a number?
Chris
5
@ Chris Walaupun jelas dalam kasus sederhana ini, ini dapat membantu Anda mendiagnosis bug lebih cepat jika Anda menentukan tipe untuk setiap variabel secara eksplisit. Anda telah menggunakan indexlebih dari sekali tempat dan salah satu tempat itu ( splice) ingin melihat nomor atau Anda akan mendapatkan kesalahan. Saat ini kompiler tidak dapat mencegah Anda membuat kesalahan di sana.
Jochem Kuijpers
33
@blorkfish ada baiknya menyebutkan bahwa jika Anda memiliki daftar objek, Anda dapat menggunakan var index = myArray.findIndex(x => x.prop==key.prop);.
Francisco Cabral
6
@ Cirelli94 - Anda merespons utas yang lebih lama, tetapi jawaban atas pertanyaan Anda adalah menghapus elemen array tidak mengubah panjangnya atau mengindeks ulang array. Karena array adalah objek dalam JavaScript, delete myArr[2]secara harfiah menghapus properti 2 dari myArr, yang juga berbeda dari myArr[2] = undefined. Moral dari cerita ini adalah hanya digunakan spliceuntuk tugas ini karena ini adalah cara yang aman untuk mendapatkan efek yang diinginkan tanpa efek samping yang membingungkan.
winglerw28
200

Jika array adalah tipe objek, maka cara paling sederhana adalah

let foo_object // Item to remove
this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object);
Malik Shahzad
sumber
20
Ini tidak menghapus apa pun yang disaringnya. Jika daftar ini perlu diubah, ini bukan caranya.
user573434
6
@ user573434 ya, Anda benar, seperti namanya. Tapi ini adalah pendekatan sederhana jika Anda ingin menghapus objek pada panggilan api yang berhasil dihapus dll.
Malik Shahzad
3
Ini bekerja dengan baik bagi saya pada array objek tanpa properti kunci yang unik. @ user573434 metode filter mengembalikan array baru tanpa objek yang difilter, sehingga array yang dihasilkan memang menghapus objek tersebut.
Jason
6
Saya pikir untuk mengembalikannya sebagai objek yang harus Anda lakukan inithis.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
Roel
1
Ini bekerja. baca saja baris ke-2 dengan seksama. dia melakukan filter dengan obj! = foo_object. dan menugaskannya ke variabel asli, sehingga mengganti array asli dengan satu minus foo_object yang difilter. menggunakannya dengan array objek dengan id deleteById(id: string) { this.data = this.data.filter(d => d.id !== id); }Hanya satu kata peringatan, jika Id tidak unik Anda akan menghapus semua dengan yang samaid
Markus
74

Dengan ES6 Anda dapat menggunakan kode ini:

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}
Idak
sumber
1
Solusi terbaik untuk menghapus tanpa mengubah referensi array DAN dengan kemungkinan untuk menerapkan algorythm kesetaraan spesifik
Sid
1
Jawaban terbaik telah ditemukan
Gvs Akhil
1
Jawaban terbaik jika menggunakan ES6
Nathan Beck
2
Anda juga dapat menggunakan: this.documents.forEach ((item, index, array) => {if (item === doc) array.splice (index, 1);}); Yang bisa jauh lebih bersih, terutama saat bekerja dengan array bersarang.
CGundlach
20

Ini solusi saya untuk itu:

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
sumber
Apa yang baik tentang solusi ini adalah ia akan bekerja bahkan ketika kesetaraan objek gagal mengidentifikasi dua objek sebagai sama.
Brad Johnson
18

Anda bisa menggunakan splicemetode pada array untuk menghapus elemen.

misalnya jika Anda memiliki array dengan nama, arrgunakan yang berikut ini:

arr.splice(2, 1);

jadi di sini elemen dengan indeks 2 akan menjadi titik awal dan argumen 2 akan menentukan berapa banyak elemen yang akan dihapus.

Jika Anda ingin menghapus elemen terakhir dari array bernama arrlakukan ini:

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

Ini akan mengembalikan arr dengan elemen terakhir dihapus.

Contoh:

var arr = ["orange", "mango", "banana", "sugar", "tea"];
arr.splice(arr.length-1, 1)
console.log(arr); // return ["orange", "mango", "banana", "sugar"]
akash venugopal
sumber
1
Hanya FYI, metode splice memodifikasi array (jadi dalam hal ini menghapus item terakhir) dan mengembalikan item yang dihapus, bukan array itu sendiri.
CGundlach
2
Seharusnya sebenarnya arr.splice (arr.length-1,1) untuk menghapus elemen terakhir.
Steve In CO
15

biarkan departemen adalah sebuah array. Anda ingin menghapus item dari array ini.

departments: string[] = [];

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

Berikut ini adalah satu liner sederhana untuk menghapus objek dengan properti dari array objek.

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

atau

this.items = this.items.filter(item => item.item_id !== item.item_id);
Jamie Armor
sumber
1
Masalah dengan solusi pertama adalah bahwa penghapusan menghilangkan elemen, tetapi ukuran array tetap sama seperti sebelum melepaskan. Dalam solusi kedua kita akan memiliki objek baru, jadi jika kita memiliki ketergantungan SPME maka kita kehilangan itu. Sambungan (yang ada di jawaban atas) tidak memiliki efek ini.
Krystian
Terima kasih telah menunjukkannya. Saya pikir dalam use case saya, saya belum menemukan itu. Diperhatikan dengan baik :)
Jamie Armor
5

Jawab menggunakan operator penyebaran 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 Wagoner
sumber
5

Satu lagi solusi menggunakan TypeScript:

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;
SH. Pavel
sumber
Meskipun ini menyelesaikan masalah yang ditanyakan, itu mahal untuk dieksekusi karena penciptaan array baru dan pengulangan atas yang asli. Melakukan operasi semacam ini pada susunan besar dapat menghasilkan efek samping yang tidak diinginkan seperti, lebih sulit pada baterai ponsel, lama menunggu, jank, dll.
Jessy
1

Gunakan ini, jika Anda perlu menghapus objek yang diberikan dari array dan Anda ingin memastikan hal berikut:

  • daftar tidak diinisialisasi ulang
  • panjang array diperbarui dengan benar
    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }
Radu Linu
sumber
0

Hanya ingin menambahkan metode ekstensi untuk sebuah 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;
    };
supernerd
sumber