Objek `Map`

Artikel ini menerangkan tentang objek Map.

Kami akan menerangkan langkah demi langkah, dari operasi asas hingga contoh praktikal yang berguna dalam situasi sebenar.

YouTube Video

Objek Map

Map ialah satu koleksi yang menyimpan pasangan kunci-nilai. Ia serupa dengan objek, tetapi berbeza kerana apa-apa jenis seperti objek, fungsi, atau primitif boleh digunakan sebagai kunci, dan susunan kemasukan dikekalkan.

Asas-asas Map

Pertama, mari kita lihat cara untuk mencipta Map dan melaksanakan operasi asas.

Kod berikut ialah contoh minimum yang mencipta peta kosong, menambah kunci, dan mendapatkan nilai.

1// Create an empty Map and add key-value pairs
2const m = new Map();
3m.set('a', 1);
4m.set('b', 2);
5
6console.log(m.get('a')); // 1
7console.log(m.size);     // 2

• Dalam kod ini, anda boleh menambah elemen dengan set, mendapatkan nilai dengan get, dan semak bilangan elemen dengan size.
• Map mengekalkan susunan penambahan, menjadikannya sesuai untuk pemprosesan yang bergantung kepada urutan.

Perilaku set, get, has, dan delete

Berikut adalah contoh operasi biasa seperti membaca, menulis, menyemak kewujudan dan memadam.

Dengan kod berikut, anda boleh menyemak nilai pulangan dan kesan setiap kaedah.

 1// Demonstrate set, get, has, and delete
 2const m2 = new Map();
 3m2.set('x', 10);
 4console.log(m2.has('x'));  // true
 5console.log(m2.get('y'));  // undefined
 6
 7m2.delete('x');
 8console.log(m2.has('x'));  // false
 9
10// set returns the map itself, allowing method chaining
11m2.set('a', 1).set('b', 2);
12console.log(m2);  // Map { 'a' => 1, 'b' => 2 }

• get akan memulangkan undefined jika kunci tidak wujud. has memeriksa kewujudan kunci, dan delete membuang kunci.
• Selain itu, kerana set memulangkan map itu sendiri, rantai metode adalah mungkin.

Apa-apa jenis boleh digunakan sebagai kunci (menggunakan objek sebagai kunci)

Salah satu kelebihan utama Map ialah anda boleh menggunakan objek secara langsung sebagai kunci.

Contoh berikut menunjukkan cara mengaitkan nilai dalam Map dengan menggunakan objek sebagai kunci.

 1// Use objects as keys in a Map
 2const keyObj = { id: 1 };
 3const keyFunc = () => {};
 4const objMap = new Map();
 5
 6// Another object with the same content but a different reference
 7const anotherKeyObj = { id: 1 };
 8
 9objMap.set(keyObj, 'objectValue');
10objMap.set(keyFunc, 'functionValue');
11objMap.set(anotherKeyObj, 'anotherValue');
12
13console.log(objMap.get(keyObj));         // 'objectValue'
14console.log(objMap.get(keyFunc));        // 'functionValue'
15console.log(objMap.get(anotherKeyObj));  // 'anotherValue'

• Apabila menggunakan objek sebagai kunci, adalah penting bahawa mereka adalah rujukan yang sama. Walaupun kandungannya sama, objek dengan rujukan berbeza dianggap sebagai berbeza dan bukan kunci yang sama.

Iterasi (gelungan)

Map mengekalkan urutan penambahan, oleh itu iterasi sering digunakan.

Di bawah, kami tunjukkan cara menggunakan for...of, forEach, serta kaedah keys(), values(), dan entries().

 1// Iterating a Map with for...of and forEach
 2const iterMap = new Map([['a', 1], ['b', 2], ['c', 3]]);
 3
 4// for...of over entries (default)
 5for (const [key, value] of iterMap) {
 6  console.log(key, value);
 7}
 8
 9// forEach callback
10iterMap.forEach((value, key) => {
11  console.log(key, value);
12});
13
14// keys() and values()
15console.log([...iterMap.keys()]);   // ['a','b','c']
16console.log([...iterMap.values()]); // [1,2,3]

• entries() memulangkan satu tatasusunan pasangan [key, value], yang boleh dijadikan tatasusunan menggunakan sintaks spread. Perhatikan bahawa callback untuk forEach menerima argumen dalam urutan value, key.

Menukar antara Map dan Object

Anda boleh menukar objek sedia ada kepada Map, atau Map kepada objek biasa atau tatasusunan.

 1// Convert between Map and Object / Array
 2const obj = { a: 1, b: 2 };
 3const mapFromObj = new Map(Object.entries(obj)); // Object -> Map
 4console.log(mapFromObj.get('a')); // 1
 5
 6const objFromMap = Object.fromEntries(mapFromObj); // Map -> Object
 7console.log(objFromMap); // { a: 1, b: 2 }
 8
 9const arrayFromMap = [...mapFromObj]; // Map -> Array of [key, value]
10console.log(arrayFromMap); // [['a',1], ['b',2]]

• Menggunakan Object.entries dan Object.fromEntries memudahkan proses penukaran. Walau bagaimanapun, kerana kunci objek terhad kepada rentetan atau simbol, kunci bukan rentetan akan hilang apabila ditukar kembali kepada objek.

Corak Praktikal: Pengiraan Kekerapan (Count Map)

Apabila mengira kekerapan elemen dalam satu tatasusunan, penggunaan Map menjadikan proses tersebut lebih mudah.

Kod berikut adalah contoh menggunakan map untuk mengira kekerapan rentetan dalam tatasusunan dan menyusunnya.

1// Count frequencies with Map
2const arr = ['apple','banana','apple','orange','banana','apple'];
3const freq = new Map();
4
5for (const item of arr) {
6  freq.set(item, (freq.get(item) || 0) + 1);
7}
8
9console.log([...freq.entries()]); // [['apple',3], ['banana',2], ['orange',1]]

• Menggunakan Map memudahkan semakan kewujudan dan kemas kini. Ini boleh dilakukan dengan objek juga, tetapi Map mungkin lebih intuitif apabila bekerja dengan kunci sewenang-wenangnya.

Catatan tentang Map dan JSON.stringify (Penyirian)

JSON.stringify tidak boleh menyerikan Map secara langsung. Jika anda perlu menyimpan Map, anda perlu menukarnya dahulu.

Contoh berikut menunjukkan cara menukar Map kepada tatasusunan sebelum menjadikannya JSON, serta cara mengembalikannya.

1// Serialize and deserialize a Map
2const m3 = new Map([['x', 1], ['y', 2]]);
3const json = JSON.stringify([...m3]); // convert to array first
4console.log(json); // '[["x",1],["y",2]]'
5
6const restored = new Map(JSON.parse(json));
7console.log(restored.get('x')); // 1

• Map yang perlu disimpan atau dihantar hendaklah ditukar kepada tatasusunan sebelum penyirian. Apabila memulihkan, gunakan JSON.parse untuk menukar kepada tatasusunan, kemudian tukar kembali kepada Map.

Pengenalan kepada WeakMap dan Cara Menggunakannya

WeakMap berbeza kerana kuncinya dirujuk secara lemah (tertakluk kepada koleksi sampah).

Ia berguna untuk menyimpan cache atau metadata dengan objek sebagai kunci, secara automatik melepaskannya apabila objek kunci dikutip.

1// WeakMap for metadata tied to object lifecycle
2const wm = new WeakMap();
3let obj = {};
4wm.set(obj, { meta: 'info' });
5console.log(wm.get(obj)); // { meta: 'info' }
6
7obj = null; // now the object can be GC'd and its entry removed from WeakMap

• WeakMap tidak boleh dienumerasi atau memeriksa saiznya, tetapi berguna untuk mengelak kebocoran memori.

Ringkasan

Map ialah koleksi yang mudah digunakan di mana, tidak seperti objek, membenarkan sebarang jenis sebagai kunci dan mengekalkan urutan penambahan. Dengan memahami semua dari operasi asas hingga penggunaan lanjutan, anda boleh mengurus data dengan lebih fleksibel dan intuitif. Dengan menggunakan Object dan Map secara sesuai mengikut kes penggunaan, anda boleh meningkatkan dengan ketara kejelasan serta kebolehbacaan kod.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video