Dalam JavaScript, objek adalah salah satu struktur data yang paling umum digunakan. Mereka memberi Anda cara untuk mengatur dan menyimpan data sebagai pasangan kunci/nilai. Meskipun demikian, mereka juga memiliki beberapa batasan yang perlu diperhatikan. Dalam artikel ini, kita akan membahas batasan tersebut dan menunjukkan bagaimana menggunakan objek Peta vs objek biasa bisa lebih efektif
Apa itu objek Peta?
Objek Peta pertama kali diperkenalkan dengan JavaScript versi ES6. Seperti objek biasa, mereka dapat berisi kunci, pasangan nilai dan memungkinkan Anda untuk menambah, mengambil, menghapus, dan memeriksa kunci dan nilai tersebut
Untuk membuat instance baru dari objek Map kita dapat melakukannya sebagai berikut
const map = new Map([ ["key", "value"] ]);
Masuk ke mode layar penuh Keluar dari mode layar penuh
Ada beberapa properti dan metode bawaan yang disertakan dengan instance objek Peta. Ini termasuk tetapi tidak terbatas pada beberapa yang lebih umum seperti berikut ini
const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } 2 - Menambahkan kunci, pasangan nilai dengan argumen pertama sebagai kunci dan kedua sebagai nilai const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } 3
const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } _4 - Mengambil nilai yang ditautkan ke kunci dengan meneruskan kunci yang ditentukan sebagai satu-satunya argumen const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } 5
const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } 6 - Menghapus kunci, pasangan nilai yang diidentifikasi oleh nama kunci yang diteruskan const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } 7
const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } 8 - Memeriksa apakah kunci, pasangan nilai ada atau tidak dan mengembalikan nilai boolean. Mengambil kunci sebagai satu-satunya argumen const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } _9
{0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'} 0 - Mengembalikan bilangan bulat yang mewakili jumlah pasangan kunci/nilai yang terdapat dalam objek Peta
Untuk informasi lebih lanjut tentang properti dan metode bawaan objek Peta, lihat ini
Menggunakan Peta untuk menghindari batasan penggunaan objek
Untuk menunjukkan bagaimana menggunakan objek Peta dapat mengatasi batasan yang muncul saat menggunakan objek, mari kita bahas apa batasan ini dan bagaimana kita dapat menghindarinya menggunakan peta
Objek tidak dijamin akan dipesan
Meskipun ini telah berubah sejak JavaScript diperbarui ke ES6, pengurutan untuk pasangan kunci/nilai dari objek biasa masih tidak dapat diandalkan
Ambil objek berikut yang kami deklarasikan sebagai contoh
const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } _
Masuk ke mode layar penuh Keluar dari mode layar penuh
Saat kami mencatat {0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}
_1 ke konsol, ini menampilkan urutan yang berbeda dari yang awalnya kami deklarasikan
{0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'} _
Masuk ke mode layar penuh Keluar dari mode layar penuh
Saat kami mencoba mendeklarasikan pasangan kunci/nilai yang sama dengan peta,
const map = new Map([ [1, 2], [0, false], ["Greet", "Hello World"], ["a", "b"], ["c", "c"] ]);
Masuk ke mode layar penuh Keluar dari mode layar penuh
kami malah mendapatkan urutan asli di mana mereka dinyatakan
{1 => 2, 0 => false, 'Greet' => 'Hello World', 'a' => 'b', 'c' => 'c'}
Masuk ke mode layar penuh Keluar dari mode layar penuh
Tidak ada metode untuk menentukan panjang atau ukuran suatu objek dengan cepat
Dengan objek, kami menentukan ukuran secara manual dengan mengulangi objek menggunakan for loop dan counter atau menggunakan metode {0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}
2 bersama dengan {0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}
3
const obj = { 1: "one", 2: "two", 3: "three" }; Object.entries(obj).length; // 3
Masuk ke mode layar penuh Keluar dari mode layar penuh
Saat kita perlu mengetahui jumlah pasangan kunci/nilai dalam objek Peta, kita dapat menggunakan properti {0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}
0 untuk mendapatkannya dengan mudah
const map = new Map([ [1, "one"], [2, "two"], [3, "three"] ]); console.log(map.size); // 3
Masuk ke mode layar penuh Keluar dari mode layar penuh
Objek peta secara alami dapat diubah, Objek tidak
Untuk beralih ke objek, kami biasanya menggunakan for. dalam lingkaran untuk mendapatkan setiap kunci dan nilai secara manual
// obj = {1: 'one', 2: 'two', 3: 'three'} for (let key in obj) { console.log(key, ": ", obj[key]); // 1: one // 2: two // 3: three }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Namun perhatikan bahwa {0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}
_5 dan {0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}
6 atau {0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}
2 juga dapat digunakan untuk membuat objek dapat diubah
Object.entries(obj) .forEach(entry => console.log(entry[0], ": ", entry[1])); // 1: one // 2: two // 3: three
Masuk ke mode layar penuh Keluar dari mode layar penuh
Objek peta dapat dengan mudah dan langsung diulang dengan metode seperti {0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}
8 untuk mengakses setiap nilai
// map = {1 => 'one', 2 => 'two', 3 => 'three'} map.forEach(value => console.log(value)); // one // two // three
Masuk ke mode layar penuh Keluar dari mode layar penuh
Jenis objek kunci hanya dapat berupa string atau simbol
Saat mendeklarasikan objek Javascript, satu-satunya tipe yang bisa kita gunakan sebagai kunci adalah string atau simbol
const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } _0
Masuk ke mode layar penuh Keluar dari mode layar penuh
Sementara kunci untuk objek JavaScript biasa hanya bisa berupa string atau simbol, hal yang sama tidak berlaku untuk objek Peta. Untuk objek Peta, kuncinya bisa bertipe apa saja termasuk fungsi, objek, dan larik
const obj = { 1: 2, 0: false, "Greet": "Hello World", a: "b", c: "c" } _1
Masuk ke mode layar penuh Keluar dari mode layar penuh
Ringkasan
Dalam Javascript, Peta adalah struktur data yang sangat berguna. Mereka memberikan lebih banyak fleksibilitas daripada objek biasa, misalnya, Peta memberi kita kemampuan untuk menggunakan tipe data apa pun sebagai kunci sambil mempertahankan urutan asli yang dideklarasikan dengannya
Lain kali Anda meraih objek JavaScript biasa untuk menyimpan semacam data kompleks, pertimbangkan untuk menggunakan peta. Bergantung pada kasus penggunaan, ini mungkin akan membantu Anda dengan lebih baik