Diterbitkan pada

Peta Hash dalam JavaScript: Pasangan Kunci-Nilai dengan Prestasi Tinggi

Penulis

Mengapa HashMap?

Kita semua tahu bahawa bahasa pengaturcaraan lain mempunyai sesuatu yang dipanggil Hashtable. Ia adalah struktur data yang menyimpan pasangan kunci-nilai yang sangat hebat kerana carian masa tetap O(1) mereka. Ia adalah struktur data yang menguntungkan yang boleh kita gunakan untuk menyimpan data. Dalam JavaScript, kita tidak mempunyai struktur data terbina dalam seperti Hashtable. Tetapi kita boleh menggunakan objek untuk menyimpan pasangan kunci-nilai. Ia dipanggil Peta dalam JavaScript.

Apakah Peta?

Peta adalah koleksi elemen di mana setiap elemen disimpan sebagai pasangan Kunci, Nilai. Kunci dan nilai Peta boleh menjadi apa-apa nilai (kedua-duanya objek dan nilai primitif). Objek Peta mengulang elemennya mengikut susunan penyisipan - gelung for...of mengembalikan array [kunci, nilai] untuk setiap pengulangan.

Peta menyimpan pasangan kunci-nilai di mana kunci boleh menjadi sebarang jenis data. Peta mempunyai sifat yang mewakili saiz Peta. Peta mengingati susunan penyisipan asal kunci.

Kaedah & Sifat Peta

KaedahPenerangan
new Map()Mencipta objek Peta baru
set()Menetapkan nilai untuk kunci dalam Peta
get()Mengembalikan nilai untuk kunci
has()Mengembalikan boolean yang menunjukkan sama ada kunci wujud dalam Peta
delete()Mengalih keluar kunci dari Peta
clear()Mengalih keluar semua kunci dari Peta
values()Mengembalikan objek pengulang nilai dalam Peta
keys()Mengembalikan objek pengulang kunci dalam Peta
entries()Mengembalikan objek pengulang pasangan kunci-nilai dalam Peta
forEach()Melaksanakan fungsi yang diberikan sekali untuk setiap pasangan kunci-nilai dalam Peta
SifatPenerangan
sizeMengembalikan bilangan pasangan kunci/nilai dalam Peta

Contoh Peta

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

console.log(map.get('name')) // John
console.log(map.get('age')) // 30
console.log(map.get('isMarried')) // true
console.log(map.get('address')) // {city: 'New York', state: 'NY'}
console.log(map.get('hobbies')) // ['reading', 'writing', 'coding']

console.log(map.size) // 5

Pengulangan Peta

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

// Ulang kunci
for (const key of map.keys()) {
  console.log(key)
}

// Ulang nilai
for (const value of map.values()) {
  console.log(value)
}

// Ulang pasangan kunci-nilai
for (const [key, value] of map.entries()) {
  console.log(key, value)
}

// Ulang pasangan kunci-nilai
map.forEach((value, key) => {
  console.log(key, value)
})

Peta vs. Objek

PetaObjek
Peta adalah koleksi item data berkunci, seperti Objek. Tetapi perbezaan utama ialah Peta membenarkan kunci sebarang jenis.Kunci Objek mestilah sama ada rentetan atau simbol.
Peta boleh diulang dan boleh dengan mudah diulang.Objek tidak boleh diulang dan tidak boleh dengan mudah diulang.
Peta mempunyai kaedah forEach terbina dalam, jadi tidak perlu menukarnya kepada array.Objek tidak mempunyai kaedah forEach terbina dalam.
Peta mempunyai sifat saiz, jadi kita boleh dengan mudah mendapatkan bilangan item.Objek tidak mempunyai sifat saiz.
Peta boleh menggunakan objek sebagai kunci.Objek tidak boleh menggunakan objek sebagai kunci.
Peta lebih cepat daripada Objek secara umum.Objek umumnya lebih perlahan daripada Peta.

Kesimpulan

Dalam artikel ini, kita telah mempelajari tentang Peta dalam JavaScript. Kita telah mempelajari tentang kaedah dan sifat Peta. Kita juga telah mengetahui tentang perbezaan antara Peta dan Objek. Saya harap anda menikmati artikel ini. Jika anda mempunyai sebarang soalan, sila tinggalkan komen di bawah. Terima kasih kerana membaca.

Asalnya disiarkan di: https://blog.imam.dev/blog/javascript-hashmap

Rujukan

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://www.freecodecamp.org/news/what-is-a-javascript-map-what-are-the-differences-between-map-and-object-in-javascript/

https://www.geeksforgeeks.org/map-vs-object-javascript/