Menambah dan menghapus elemen dalam array javascript

Cakupan

• Pada artikel ini, kita akan mempelajari cara menghapus elemen dari array dalam javascript menggunakan berbagai teknik dan metode berikut
  • sambatan()
  • Saring()
  • menggeser()
  • pop()
• Kita juga akan belajar tentang indeks array, metode indexOf(), dan menggunakan loop for untuk menghapus elemen
• Kami juga akan belajar tentang operator hapus dan mengapa Anda tidak boleh menggunakan operator hapus

pengantar

Array adalah salah satu struktur data yang paling penting dan banyak digunakan. Kita dapat melakukan berbagai jenis operasi pada array, seperti iterasi pada elemen array, menambahkan elemen baru, menghapus elemen, dll. Pada artikel ini, kita akan belajar tentang berbagai cara di mana kita dapat menghapus elemen tertentu dari array dalam javascript

Memahami Indeks Array

Sebelum membahas cara menghapus elemen dari array di javascript, mari kita bahas indeks array terlebih dahulu

[GAMBAR 2 array karakter dengan indeks setiap elemen di atas setiap elemen array]

Indeks larik adalah bilangan bulat dari 000 hingga (n−1)(n-1)(n−1) (di mana nnn adalah panjang larik), yang ditetapkan ke setiap elemen larik secara kontinu

Dengan menggunakan indeks array, kita dapat mengakses elemen array satu per satu dalam waktu yang konstan tanpa mengulangi seluruh array

Mari kita pahami ini dengan sebuah contoh

const carBrands = ["BMW", "Audi", "GM", "Ford", "Tesla"]; console.log("Second brand in car brands is " + carBrands[1]); console.log("Fourth brand in car brands is " + carBrands[3]);

Keluaran

Second brand in car brand is Audi Fourth brand in car brands is Ford _

Karena indeks dimulai dari nol, indeks 1 sesuai dengan elemen kedua dari array, dan indeks 3 sesuai dengan elemen keempat

Catatan. Dalam javascript, kita tidak bisa menggunakan indeks negatif untuk mengakses elemen array dari akhir, itu tidak diperbolehkan secara default

Menggunakan indexOf() Dan splice() - Pola yang Dapat Diubah

Sekarang Anda tahu cara mengakses elemen array menggunakan indeks array, mari kita lihat cara menghapus elemen dari array menggunakan metode splice()

splice() adalah metode bawaan dalam javascript. Ini digunakan untuk memodifikasi elemen array yang ada dengan menghapus atau menggantinya dengan elemen array. Metode ini dikategorikan dalam pola yang bisa berubah (dapat diubah) karena di sini, kami membuat perubahan dalam array yang sama dan tidak membuat array baru

Sintaksis

array.splice(index, remove_count, item_list);

Parameter sambungan

• indeks. Nilai indeks dari tempat kami ingin menghapus/mengganti elemen. Jika negatif, maka akan dihitung dari akhir array, misalnya, -2 akan menjadi elemen array detik terakhir

• hapus_hitung. Ini mewakili jumlah elemen array yang ingin kita hapus dari nilai indeks yang disebutkan sebelumnya. 1 jika kita ingin menghapus hanya satu elemen array

• item_list(opsional). Ini adalah daftar item baru yang dipisahkan oleh operator koma yang ingin kita masukkan ke dalam array mulai dari nilai indeks yang disebutkan di parameter pertama

Contoh Kode

1. Menghapus elemen tertentu

const carBrands = ["BMW", "Audi", "GM", "Ford", "Tesla"]; console.log("Original Brands: " + carBrands); carBrands.splice(2, 1); console.log("After splice() method: " + carBrands);

Keluaran

Original Brands: BMW,Audi,GM,Ford,Tesla After splice() method: BMW,Audi,Ford,Tesla _

2. Mengganti elemen dengan elemen baru

const carBrands = ["BMW", "Audi", "GM", "Ford", "Tesla"]; console.log("Original Brands: " + carBrands); carBrands.splice(2, 1, "Mercedes", "TATA"); console.log("After splice() method: " + carBrands);

Keluaran

Original Brands: BMW,Audi,GM,Ford,Tesla After splice() method: BMW,Audi,Mercedes,TATA,Ford,Tesla _

3. Menghapus elemen ketika kita tidak mengetahui indeksnya (menggunakan metode indexOf())

const carBrands = ["BMW", "Audi", "GM", "Ford", "Tesla"]; console.log("Original Brands: " + carBrands); const elementIndex = carBrands.indexOf("GM"); carBrands.splice(elementIndex, 1, "Mercedes", "TATA"); console.log("After splice() method: " + carBrands);

Keluaran

Original Brands: BMW,Audi,GM,Ford,Tesla After splice() method: BMW,Audi,Mercedes,TATA,Ford,Tesla _

Di sini, kami menggunakan. metode indexOf() untuk mendapatkan indeks merek "GM". Kami menggunakan metode ini ketika kami tidak mengetahui lokasi elemen yang ingin kami hapus dari array

Menggunakan. filter() - Pola Tidak Berubah

Kami juga dapat menghapus elemen atau beberapa elemen menggunakan metode filter(). Ini juga merupakan fungsi javascript inbuilt yang membuat larik elemen baru dari larik yang diberikan yang hanya terdiri dari elemen yang memenuhi kondisi tertentu yang diatur dalam fungsi callback dari metode filter(). Kami mengikuti pola yang tidak dapat diubah di sini karena kami membuat larik baru dan tidak membuat perubahan di tempat pada larik asli

Sintaksis

array.filter(callback(element, index, arr), thisValue); _

Parameter filter()

• panggilan balik(). Parameter pertama filter() adalah fungsi panggilan balik (fungsi normal yang diteruskan sebagai argumen di beberapa fungsi lain) yang akan dipanggil untuk setiap elemen array. Fungsi ini berisi kondisi yang harus diikuti oleh elemen array, dan elemen yang akan mengikuti kondisi tersebut akan berada di dalam array baru
  • Fungsi callback memiliki tiga parameter. elemen, indeks, dan arr
  • elemen adalah elemen saat ini yang diteruskan dalam fungsi. Ini adalah parameter yang diperlukan
  • indeks adalah indeks saat ini dari elemen yang dilewati. Ini adalah parameter opsional
  • arr adalah larik dari elemen saat ini yang diteruskan. Ini juga merupakan parameter opsional
• nilai ini. Ini adalah parameter opsional. Ini berisi nilai yang akan digunakan sebagai nilai this callback. Ini tidak ditentukan secara default

Contoh kode

Menghapus usia kurang dari 18 tahun

Second brand in car brand is Audi Fourth brand in car brands is Ford _0

Keluaran

Second brand in car brand is Audi Fourth brand in car brands is Ford _1

Menggunakan parameter thisValue untuk mencetak angka yang dapat dibagi

Second brand in car brand is Audi Fourth brand in car brands is Ford _2

Keluaran

Second brand in car brand is Audi Fourth brand in car brands is Ford _3

Keluaran

Menggunakan A untuk Loop - Pola Tradisional

Alih-alih menggunakan metode javascript bawaan, kita dapat memprogram metode untuk menghapus elemen sendiri menggunakan perulangan for

Contoh kode

Menghapus BMW dari larik merek mobil dan mengembalikan larik baru sebagai hasil (pola tidak berubah)

Second brand in car brand is Audi Fourth brand in car brands is Ford _4

Keluaran

Second brand in car brand is Audi Fourth brand in car brands is Ford _5

Dalam contoh di atas, kami telah menggunakan for loop untuk menghapus elemen array tertentu. Kita harus menggunakan kondisi if di dalam loop, kondisi tersebut akan menentukan elemen mana yang akan dihapus

Menggunakan fungsi shift() dan pop()

Fungsi shift() menghapus elemen pertama dari array, dan fungsi pop() menghapus elemen terakhir dari array. Kedua fungsi ini mengembalikan elemen array yang dihapus dan jika digunakan pada array kosong, mereka akan mengembalikan undefined

Sintaksis

Second brand in car brand is Audi Fourth brand in car brands is Ford _6

Mereka tidak menerima parameter apa pun

Contoh kode

Menghapus elemen dari awal array (menggunakan metode shift())

Second brand in car brand is Audi Fourth brand in car brands is Ford _7

Keluaran

Second brand in car brand is Audi Fourth brand in car brands is Ford _5

Menghapus elemen dari akhir array (menggunakan metode pop())

Second brand in car brand is Audi Fourth brand in car brands is Ford _9

Keluaran

array.splice(index, remove_count, item_list); 0

Menghindari Kata Kunci "hapus".

Operator hapus juga dapat menghapus elemen dari array di javascript. Namun, tidak disarankan menggunakan operator hapus untuk menghapus elemen larik karena kerugiannya. Saat kita menggunakan delete untuk menghapus elemen array, ini menghapus nilai dari array tetapi tidak membebaskan indeks itu; . Ini bisa membingungkan dan dapat menyebabkan masalah lebih lanjut dalam kode, jadi disarankan untuk menghindari penggunaan delete untuk menghapus elemen array

Sintaksis

Contoh kode

array.splice(index, remove_count, item_list); 1

Keluaran

array.splice(index, remove_count, item_list); 2

Seperti yang Anda lihat, panjang array asli dan baru sama. Catatan. Dalam contoh di atas, satu string kosong (tambahan "," bukan salah ketik)

Bagaimana Anda menghapus dan menambahkan elemen dalam array?

Bisakah Anda menambahkan elemen ke array JavaScript?

Bagaimana cara menghapus item dari array di JavaScript?

Metode array mana yang menambah dan atau menghapus elemen dari array?