Javascript menggunakan objek sebagai kunci di peta

Sebelum ES6, untuk membuat kamus atau peta, kami sering menggunakan objek untuk menyimpan kunci dan nilai. Ini memiliki beberapa masalah yang dapat dihindari dengan peta

Table of Contents Show

Bisakah peta JavaScript memiliki objek sebagai kunci?
Bagaimana cara menyimpan objek di peta dalam JavaScript?
Bagaimana cara menetapkan objek untuk dipetakan dalam JavaScript?
Bagaimana Anda menetapkan objek ke kunci

Objek memungkinkan kita memetakan string ke nilai. Namun, dengan jebakan objek JavaScript dan keberadaan konstruktor

'toLocaleString' in obj;

7, kita akhirnya dapat berhenti menggunakan objek sebagai peta atau kamus

Sifat Warisan dan Bacaan

Biasanya, objek dalam JavaScript mewarisi dari objek ________0______8 jika tidak ada prototipe yang ditetapkan secara eksplisit. Artinya kita memiliki metode yang ada di prototipe objek

Untuk memeriksa apakah properti ada di objek atau prototipenya, kita harus menggunakan

'toLocaleString' in obj;

9 dari objek. Ini menyakitkan dan kita bisa dengan mudah melupakannya

Ini berarti bahwa kita bisa secara tidak sengaja mendapatkan dan menyetel properti yang sebenarnya tidak ada di objek yang kita tentukan. Misalnya, jika kita mendefinisikan objek kosong

let obj = {}

Kemudian, ketika kita menulis

'toLocaleString' in obj;

Kami mendapatkan nilai

let obj = Object.create(null);

_0 dikembalikan. Ini karena operator

let obj = Object.create(null);

_1 menetapkan properti dalam prototipe objek sebagai bagian dari objek, yang sebenarnya tidak kita inginkan untuk kamus atau peta

Untuk membuat objek murni tanpa prototipe, kita harus menulis

let obj = Object.create(null);

Metode

let obj = Object.create(null);

_2 mengambil objek prototipe dari objek yang dibuatnya sebagai argumen, jadi kita akan mendapatkan objek yang tidak mewarisi dari prototipe apa pun. Metode bawaan seperti

let obj = Object.create(null);

3 atau

let obj = Object.create(null);

4, tidak dapat dihitung, sehingga tidak akan disertakan dalam loop

let obj = Object.create(null);

Namun, jika kita membuat objek dengan properti yang dapat dihitung seperti yang kita lakukan pada kode berikut

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

Kemudian, kami mendapatkan properti

let obj = Object.create(null);

_6 yang dicatat di

let obj = Object.create(null);

5 di atas, yang mengulangi semua properti yang dimiliki dan diwariskan dari suatu objek

Untuk mengabaikan properti yang diwariskan, kita dapat menggunakan metode

'toLocaleString' in obj;

9 dari suatu objek. Misalnya, kita bisa menulis

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

Kemudian, kami tidak mencatat apa pun

Seperti yang bisa kita lihat, mengakses nilai dengan kunci properti bisa rumit dengan objek JavaScript biasa

Mengesampingkan Nilai Properti

Dengan objek biasa, kita dapat dengan mudah mengganti dan menghapus properti yang ada. Setiap properti yang dapat ditulisi dapat diganti atau dihapus nilainya

Kami dapat menetapkan nilai ke properti apa pun yang ada di objek. Misalnya, kita bisa menulis

let obj = {};
obj.toString = null;

Lalu, saat kita berlari

obj.toString();

Kami mendapatkan kesalahan

let obj = Object.create(null);

Ini adalah masalah besar karena kita dapat dengan mudah mengubah nilai properti asli atau warisan dari suatu objek. Seperti yang bisa kita lihat, kita menimpa metode

let obj = Object.create(null);

3 bawaan dengan

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

1 hanya dengan satu operasi penugasan

Artinya, menggunakan objek sebagai kamus atau Peta berisiko karena kita dapat dengan mudah melakukannya secara tidak sengaja. Tidak ada cara untuk mencegah hal ini selain memeriksa nilai yang mungkin merupakan nama metode bawaan

Prototipe Objek

Prototipe objek dapat diakses oleh properti

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

2 miliknya. Itu adalah properti yang bisa kita dapatkan dan atur. Misalnya, kita bisa menulis

let obj = Object.create({
  a: 1
});obj.__proto__ = {
  b: 1
};

Kemudian, prototipe objek kita adalah

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

3. Ini berarti bahwa kami mengubah prototipe

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

4, yang awalnya

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

5, menjadi

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

3, hanya dengan menyetel properti

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

2 dari

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

Ketika kita mengulang melalui objek

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

_4 dengan

let obj = Object.create(null);

5 loop seperti kode berikut

for (const prop in obj) {
  console.log(prop);
}

Kami mendapatkan

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

_1 login

Ini berarti bahwa kita harus menghindari mengakses properti

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  console.log(prop);
}

2 ketika kita mencoba mengakses objek kita yang kita gunakan untuk kamus atau peta. Apa yang kita miliki adalah jebakan lain yang mungkin menjerat kita saat menggunakan objek sebagai peta atau kamus

Mendapatkan Properti Enumerable Sendiri untuk Menghindari Jebakan

Untuk menghindari jebakan mendapatkan properti yang diwarisi dari objek lain, kita dapat menggunakan

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

3 untuk mendapatkan nama properti objek itu sendiri. Ini mengembalikan array dengan kunci objek yang kita definisikan dan menghilangkan nama properti yang diwariskan

Misalnya, jika kita punya

let obj = Object.create({
  a: 1
});
console.log(Object.keys(obj));

Kemudian kita mendapatkan log array kosong

Demikian pula,

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

_4 menerima objek sebagai argumen dan mengembalikan array dengan array yang memiliki kunci sebagai elemen pertama dan nilai kunci sebagai elemen kedua

Misalnya, jika kita menulis

'toLocaleString' in obj;

Kemudian kami juga mendapatkan log array kosong

Peta ES6

Lebih baik lagi, kita harus menggunakan objek ES6

'toLocaleString' in obj;

7, yang merupakan implementasi sebenarnya dari peta atau kamus

'toLocaleString' in obj;

7 objek memiliki metode

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

7 yang memungkinkan kita menambahkan kunci dan nilai, yang merupakan argumen pertama dan kedua dari apa yang diterima masing-masing metode

Kita dapat mendefinisikan Peta seperti yang kita lakukan pada kode berikut

'toLocaleString' in obj;

Alih-alih menggunakan metode

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

_7 untuk menambahkan kunci dan nilai, kita juga dapat melewatkan array bersarang di mana setiap entri array memiliki kunci sebagai elemen pertama dan nilai sebagai elemen kedua

Satu hal yang baik tentang objek

'toLocaleString' in obj;

_7 adalah kita dapat menggunakan kunci non-string. Misalnya, kita bisa menulis

'toLocaleString' in obj;

Kita juga dapat menggunakan array bersarang untuk mendefinisikan

'toLocaleString' in obj;

7. Misalnya, alih-alih menggunakan metode

let obj = Object.create({
  a: 1
});for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

_7 berkali-kali, kita dapat menulis yang berikut ini

'toLocaleString' in obj;

Ada juga metode khusus untuk mendapatkan entri dengan kunci, mendapatkan semua entri, mengulang setiap entri, dan menghapus entri. Kita dapat menggunakan metode

let obj = {};
obj.toString = null;

_2 untuk mendapatkan entri dengan kuncinya

'toLocaleString' in obj;

Kita juga bisa mendapatkan nilai dari kunci non-string, tidak seperti objek. Misalnya, jika kita punya

'toLocaleString' in obj;

Kemudian

let obj = {};
obj.toString = null;

_3 akan membuat kita

let obj = {};
obj.toString = null;

Dan kita dapat menghapus semua entri objek

'toLocaleString' in obj;

_7 dengan metode

let obj = {};
obj.toString = null;

6. Misalnya, kita bisa menulis

'toLocaleString' in obj;

Kita bisa mendapatkan semua entri dengan metode

let obj = {};
obj.toString = null;

_7 dan kita dapat menggunakan loop

let obj = {};
obj.toString = null;

8 untuk mengulang item juga karena memiliki iterator

Kesimpulan

Kita harus berhenti menggunakan objek sebagai kamus sekarang. Ada terlalu banyak jebakan karena objek mewarisi dari objek

'toLocaleString' in obj;

8 secara default dan objek lain saat kita menyetelnya

Ini juga memungkinkan kita mengganti nilai metode seperti

let obj = Object.create(null);

3 yang bukan merupakan hasil yang sering kita inginkan

Untuk menghindari masalah ini, kita harus menggunakan objek

'toLocaleString' in obj;

7 yang diperkenalkan di ES6. Ini memiliki metode khusus untuk mendapatkan dan mengatur entri dan kita dapat mengulanginya dengan

let obj = {};
obj.toString = null;

8 loop atau mengonversi objek menjadi array

Bisakah peta JavaScript memiliki objek sebagai kunci?

Dengan peta, semua tipe asli (string, angka, boolean, tidak terdefinisi, null, objek) dapat menjadi kunci

Bagaimana cara menyimpan objek di peta dalam JavaScript?

peta. set(key, value) – menyimpan nilai dengan kunci. peta. get(key) – mengembalikan nilai dengan kunci, tidak ditentukan jika kunci tidak ada di peta. peta. has(key) – mengembalikan nilai true jika kuncinya ada, false jika tidak. peta. delete(key) – menghapus elemen (pasangan kunci/nilai) dengan kunci.

Bagaimana cara menetapkan objek untuk dipetakan dalam JavaScript?

Untuk mengonversi objek menjadi Map , kita dapat memanggil Objek. entries() dengan objek sebagai argumen, dan meneruskan hasilnya ke konstruktor Map() untuk membuat objek Map . Misalnya. const obj = { pengguna1. 'John', pengguna2. 'Kate', pengguna3. 'Petrus', }; .