Dapatkah suatu objek menjadi kunci dalam peta javascript?

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'}

{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'}

{0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}

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'}

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'}

{0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}

{0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}

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'}

// 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"
}

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"
}

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

Bisakah peta JavaScript memiliki objek sebagai kunci?

Bagaimana cara menemukan kunci suatu objek di peta?

Bagaimana cara menyimpan objek di peta dalam JavaScript?

Bisakah kunci Objek JavaScript menjadi array?