Bagaimana untuk menukar objek biasa kepada Peta ES6 menggunakan JavaScript?

Terdapat banyak cara untuk menukar objek biasa kepada Peta ES6 dalam JavaScript. Cara paling mudah dan paling berkesan ialah menggunakan fungsi Object.entry() dan Map() pembina. Sebagai perbandingan, alternatif yang lebih fleksibel termasuk Object.keys() dan Array.prototype.forEach() dan for...in Loops and Map( ) kaedah fungsi.

Peta

dalam ES6 ialah koleksi pasangan nilai kunci. Di sini, kita boleh menggunakan sebarang jenis objek sebagai kunci, termasuk jenis data primitif seperti rentetan dan nombor. Nilai dalam peta boleh menjadi objek dari sebarang jenis.

Perbezaan utama antara Map dan Object ialah dalam Map kekunci boleh terdiri daripada sebarang jenis data manakala dalam Object ia sentiasa ditukar kepada rentetan.

Namun begitu, peta mempunyai beberapa kelebihan berbanding objek biasa, seperti kebolehubahan dan pesanan elemen terjamin. Artikel ini menerangkan cara menukar objek biasa kepada Peta ES6 menggunakan JavaScript.

Kaedah 1: Gunakan Object.entry() dan Map()

Kaedah pertama menukar objek biasa kepada pemetaan intp ES6 yang akan kita pelajari hari ini terdiri daripada dua langkah -

• Gunakan kaedah Object.entry() untuk mendapatkan tatasusunan pasangan nilai kunci daripada objek

• Kemudian hantar tatasusunan kepada pembina Map().

Contoh

Setiap tatasusunan dalam tatasusunan yang dikembalikan oleh kaedah Object.entry() mewakili pasangan nilai kunci dalam objek. Berikut ialah contoh cara menukar objek biasa kepada Peta ES6 menggunakan pembina Object.entry() dan Map() -

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map(Object.entries(plainObject));
console.log(map); 

Dalam contoh ini, gunakan fungsi Object.entry() untuk menukar objek biasa kepada tatasusunan pasangan nilai kunci. Tatasusunan ini kemudiannya dihantar ke fungsi Map(), yang menjana objek Peta baharu menggunakan pasangan nilai kunci ini.

Kaedah Object.entry() hanya memerlukan satu baris kod dan disokong sepenuhnya oleh kebanyakan penyemak imbas moden. Walau bagaimanapun, pendekatan ini terhad kepada objek dengan sifat terhitung dan tidak termasuk sifat dengan kunci simbolik.

Kaedah 2: Gunakan untuk...dalam gelung dan pembina Map()

Sekarang mari kita lihat cara lain untuk menukar objek biasa kepada Peta ES6. Kaedah ini termasuk langkah berikut

• Gunakan for...in loop untuk mengulangi sifat objek

• Tambahkannya pada objek Peta baharu menggunakan kaedah Map.set().

Contoh

Berikut ialah contoh cara menukar objek biasa kepada Peta ES6 menggunakan gelung for...in dan pembina Map() -

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
for (let key in plainObject) {
   map.set(key, plainObject[key]);
}
console.log(map); 

Dalam kaedah ini, kami menggelung dan menetapkan sifat peta, yang mungkin menjadikan kaedah ini kurang cekap daripada kaedah pertama.

Walau bagaimanapun, kaedah ini juga berfungsi untuk objek dengan sifat dan sifat yang tidak boleh dikira dengan Simbol sebagai kunci.

Kaedah 3: Gunakan Object.keys() dan Array.prototype.forEach()

Dalam kaedah ini kita mengikuti langkah-langkah yang diberikan di bawah -

• Kami mula-mula menggunakan Object.keys(obj) untuk mendapatkan tatasusunan kunci objek.

• Kemudian kami menggunakan kaedah Array.prototype.forEach() untuk mengulangi kekunci

• Kemudian kami menggunakan kaedah Map.set() untuk menambah pasangan nilai kunci pada peta.

Contoh

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
Object.keys(plainObject).forEach(key => {
   map.set(key, plainObject[key]);
});
console.log(map);

Adalah penting untuk diingat bahawa kaedah for...in loop, Object.keys() dan Array.prototype.forEach() semuanya akan mengembalikan objek hartanah dalam susunan yang berbeza daripada definisi asal. Hartanah akan dikembalikan dalam susunan penghitungan.

Walau bagaimanapun, kaedah fungsi Map() akan memulangkan pasangan nilai kunci dalam susunan ia dihantar.

KESIMPULAN

Bergantung pada keperluan khusus projek anda, anda boleh memilih kaedah yang paling sesuai dengan keperluan anda. Perlu diingat bahawa jika pesanan penting dalam kes penggunaan anda, kaedah pembina Map() ialah pilihan terbaik jika tidak, kaedah lain akan berfungsi dengan baik.

Atas ialah kandungan terperinci Bagaimana untuk menukar objek biasa kepada Peta ES6 menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!