Cara terbaik untuk menghapus item dari array javascript

Pssst. BOOTCAMP PENGEMBANGAN WEB 2023 dimulai pada 01 FEBRUARI 2023. Bergabunglah dengan daftar tunggu, pesan tempat Anda dalam kursus kelompok 10 minggu saya dan pelajari dasar-dasarnya, HTML, CSS, JS, Tailwind, React, Next. js dan banyak lagi. ✨

Berikut adalah beberapa cara untuk menghapus item dari array menggunakan JavaScript

Semua metode yang dijelaskan tidak memutasikan array asli, melainkan membuat yang baru

Jika Anda mengetahui indeks suatu item

Misalkan Anda memiliki sebuah array, dan Anda ingin menghapus item di posisi i

Salah satu metode adalah dengan menggunakan slice()

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 2
const filteredItems = items.slice(0, i).concat(items.slice(i + 1, items.length))
// ["a", "b", "d", "e", "f"]

slice()_ membuat array baru dengan indeks yang diterimanya. Kami membuat array baru, dari awal hingga indeks yang ingin kami hapus, dan menggabungkan array lain dari posisi pertama mengikuti yang kami hapus ke akhir array

Jika Anda tahu nilainya

Dalam hal ini, salah satu opsi yang baik adalah menggunakan filter(), yang menawarkan pendekatan yang lebih deklaratif

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)
// ["a", "b", "d", "e", "f"]

Ini menggunakan fungsi panah ES6. Anda dapat menggunakan fungsi tradisional untuk mendukung browser lama

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
  return item !== valueToRemove
})
// ["a", "b", "d", "e", "f"]

atau Anda dapat menggunakan Babel dan mengubah kode ES6 kembali ke ES5 agar lebih mudah dicerna oleh browser lama, namun menulis JavaScript modern dalam kode Anda

Nilai dalam array dapat berupa tipe data apa pun, termasuk angka, string, boolean, dan objek

Anda dapat menambah, memperbarui, atau menghapus nilai dari array, dan dalam artikel ini, kita akan melihat bagaimana Anda menghapus elemen dari array JavaScript.

Cara menghapus item dari array di JavaScript

8 cara mudah untuk menghapus elemen dari array di JavaScript

1. Himpunan. pop(). Metode pop() menghapus dari akhir Array
2. Himpunan. sambatan(). Metode splice() menghapus dari indeks Array tertentu
3. Himpunan. menggeser(). Metode shift() menghapus dari awal Array
4. Himpunan. mengiris(). Metode slice() menghapus item yang tidak diperlukan dan mengembalikan item yang diperlukan
5. Himpunan. Saring(). Ini memungkinkan Anda untuk menghapus elemen dari Array secara terprogram
6. Menggunakan operator hapus JavaScript
7. Hapus array
8. Menggunakan fungsi kustom

Metode 1. Menggunakan larik. metode pop()

Array. Metode pop() menghapus elemen terakhir dari array, mengembalikan item tersebut, dan memperbarui panjang array

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.pop();
console.log(objArr);
console.log(removedEl);

Keluaran

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }

Array. fungsi pop() menghapus elemen terakhir dan mengembalikan elemen tersebut. Jadi, akhirnya, kami mencetak variabel array dan menghapus El

Metode 2. Menggunakan larik. sambatan() metode

JavaScript array splice() adalah metode bawaan yang mengubah elemen array dengan menghapus atau mengganti elemen yang ada dan menambahkan elemen baru

Untuk menghapus objek pertama dari array atau objek terakhir dari array, gunakan array. sambatan() metode

Lihat contoh di bawah ini di mana kita menghapus objek pertama dari sebuah array

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.splice(0, 1);
console.log(objArr);
console.log(removedEl);

Keluaran

[
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' }
]
[ { name: 'Eleven', show: 'Stranger Things' } ]

Metode splice() mengembalikan array yang berisi item yang dihapus, seperti yang terlihat dari output

Metode 3. Menggunakan larik. pergeseran() metode

Metode shift array JavaScript () menghapus item pertama dari array dan mengembalikan item yang dihapus itu

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.shift();
console.log(objArr);
console.log(removedEl);

Keluaran

[
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' }
]
{ name: 'Eleven', show: 'Stranger Things' }

Metode shift() tidak mengembalikan array. Sebaliknya, ia mengembalikan elemen yang dihapus dari array

Metode 4. Menggunakan larik. irisan() metode

Javascript array slice() adalah fungsi bawaan yang mengembalikan salinan dangkal dari porsi array ke dalam objek array baru yang dipilih dari awal hingga akhir

Untuk menghapus objek terakhir dari array, Anda dapat menggunakan array. irisan() metode

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

remainingArr = objArr.slice(0, objArr.length - 1);
console.log(remainingArr);

Keluaran

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]

Kami tahu bahwa kami harus menghapus objek terakhir dari array, jadi kami telah menggunakan array. slice() metode untuk menghapus elemen

Metode 5. Menggunakan larik. filter() metode

array filter() adalah metode bawaan yang membuat larik baru dengan semua elemen yang lolos pengujian yang diimplementasikan oleh fungsi yang disediakan.

Untuk menghapus objek berdasarkan nilai properti di JavaScript, Anda dapat menggunakan array. filter() metode

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

remainingArr = objArr.filter(data => data.name != 'Ragnar');
console.log(remainingArr);

Dalam contoh ini, kita harus menghapus objek yang memiliki nilai properti nama Ragnar

Kami akan memfilter dan mengembalikan array, yang tidak menyertakan objek bernilai Ragnar.  

Berdasarkan kondisi tersebut, array akan difilter. Untuk menghapus elemen menggunakan metode filter(), Anda harus menulis kondisi berdasarkan itu

Metode 6. Menggunakan operator hapus JavaScript

Operator hapus menghapus elemen tertentu dari array menggunakan indeks

Anda perlu memberikan indeks array ke operator hapus yang akan menghapus elemen pada indeks itu

let arr = [19, 21, 11, 46];

delete arr[1];

console.log(arr);

Keluaran

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }

Anda dapat melihat bahwa elemen indeks pertama dihapus dari array dan sekarang menjadi placeholder "1 item kosong"

Metode 7. Membersihkan array

Untuk menghapus larik dalam JavaScript, Anda dapat menggunakan cara tercepat untuk menyetel variabel larik ke larik kosong

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }

Keluaran

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }

Anda dapat melihat bahwa sebuah array sekarang kosong dan semua elemen dari sebuah array dihapus

Metode 8. Menggunakan fungsi kustom

Anda dapat membuat fungsi kustom Anda sendiri untuk menghapus elemen dari array

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }

Keluaran

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }

Dalam contoh ini, kami membuat fungsi kami yang menerima dua argumen

1. Himpunan
2. Elemen yang ingin kita hapus

Menggunakan fungsi filter() , kami menghapus elemen dari array

Kesimpulan

Menghapus objek dari array tidaklah sulit, dan kami telah mencoba banyak cara untuk mencapainya dengan tepat. Namun, menghapus elemen Array JavaScript sangat penting untuk mengelola data Anda

Menghapus elemen dari array adalah operasi yang mudah, dan tergantung di mana Anda ingin menghapus elemen tersebut

Gunakan metode khusus yang dijelaskan dalam posting blog ini jika Anda ingin menghapus elemen dari sisi depan, belakang, atau tengah atau pada indeks tertentu