Dalam tutorial ini, Anda akan belajar tentang JavaScript Maps dan WeakMaps dengan bantuan contoh.
JavaScript ES6 telah memperkenalkan dua struktur data baru, yaitu Mapdan WeakMap.
Peta mirip dengan objek di JavaScript yang memungkinkan kita menyimpan elemen dalam pasangan kunci / nilai .
Elemen-elemen dalam Peta disisipkan dalam urutan penyisipan. Namun, tidak seperti objek, peta bisa berisi objek, fungsi, dan tipe data lainnya sebagai kunci.
Buat Peta JavaScript
Untuk membuat Map, kami menggunakan new Map()konstruktor. Sebagai contoh,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Sisipkan Item ke Peta
Setelah Anda membuat peta, Anda dapat menggunakan set()metode untuk memasukkan elemen ke dalamnya. Sebagai contoh,
// create a set let map1 = new Map(); // insert key-value pair map1.set('info', (name: 'Jack', age: 26)); console.log(map1); // Map ("info" => (name: "Jack", age: 26))
Anda juga dapat menggunakan objek atau fungsi sebagai tombol. Sebagai contoh,
// Map with object key let map2 = new Map(); let obj = (); map2.set(obj, (name: 'Jack', age: "26")); console.log(map2); // Map (() => (name: "Jack", age: "26"))
Akses Elemen Peta
Anda dapat mengakses Mapelemen menggunakan get()metode ini. Sebagai contoh,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // access the elements of a Map console.log(map1.get('info')); // (name: "Jack", age: "26")
Periksa Elemen Peta
Anda dapat menggunakan has()metode ini untuk memeriksa apakah elemen tersebut ada di dalam Peta. Sebagai contoh,
const set1 = new Set((1, 2, 3)); let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // check if an element is in Set console.log(map1.has('info')); // true
Menghapus Elemen
Anda dapat menggunakan clear()dan delete()metode untuk menghapus elemen dari Peta.
The delete()kembali metode truejika pasangan kunci / nilai yang ditentukan ada dan telah dihapus atau kembali lagi false. Sebagai contoh,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing a particular element map1.delete('address'); // false console.log(map1); // Map ("info" => (name: "Jack", age: "26")) map1.delete('info'); // true console.log(map1); // Map ()
The clear()Metode menghapus semua pasangan kunci / nilai dari objek Peta. Sebagai contoh,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
Ukuran Peta JavaScript
Anda bisa mendapatkan jumlah elemen di Peta menggunakan sizeproperti. Sebagai contoh,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Iterasi Melalui Peta
Anda dapat melakukan iterasi melalui elemen Map menggunakan for… of loop atau metode forEach (). Elemen diakses dalam urutan penyisipan. Sebagai contoh,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map for (let (key, value) of map1) ( console.log(key + '- ' + value); )
Keluaran
nama- Jack usia- 27
Anda juga bisa mendapatkan hasil yang sama seperti program di atas menggunakan forEach()metode ini. Sebagai contoh,
// using forEach method() let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map map1.forEach(function(value, key) ( console.log(key + '- ' + value) ))
Iterasi Di Atas Kunci Peta
Anda dapat mengulang Peta dan mendapatkan kuncinya menggunakan keys()metode ini. Sebagai contoh,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let key of map1.keys()) ( console.log(key) )
Keluaran
usia nama
Iterasi Nilai Peta
Anda dapat mengulang Peta dan mendapatkan nilai menggunakan values()metode ini. Sebagai contoh,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let values of map1.values()) ( console.log(values); )
Keluaran
Jack 27
Dapatkan Kunci / Nilai Peta
Anda dapat mengulangi Peta dan mendapatkan kunci / nilai Peta menggunakan entries()metode ini. Sebagai contoh,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let elem of map1.entries()) ( console.log(`$(elem(0)): $(elem(1))`); )
Keluaran
nama: Jack umur: 27
Peta JavaScript vs Objek
| Peta | Obyek |
|---|---|
| Maps can contain objects and other data types as keys. | Objects can only contain strings and symbols as keys. |
| Maps can be directly iterated and their value can be accessed. | Objects can be iterated by accessing its keys. |
The number of elements of a Map can be determined by size property. | The number of elements of an object needs to be determined manually. |
| Map performs better for programs that require the addition or removal of elements frequently. | Object does not perform well if the program requires the addition or removal of elements frequently. |
JavaScript WeakMap
The WeakMap is similar to a Map. However, WeakMap can only contain objects as keys. For example,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello")
When you try to add other data types besides objects, WeakMap throws an error. For example,
const weakMap = new WeakMap(); // adding string as a key to WeakMap weakMap.set('obj', 'hello');
// throws error // TypeError: Attempted to set a non-object key in a WeakMap
WeakMap Methods
WeakMaps memiliki metode get(), set(), delete(), dan has(). Sebagai contoh,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello") // get the element of a WeakMap console.log(weakMap.get(obj)); // hello // check if an element is present in WeakMap console.log(weakMap.has(obj)); // true // delete the element of WeakMap console.log(weakMap.delete(obj)); // true console.log(weakMap); // WeakMap ()
WeakMaps Tidak Dapat Diulang
Tidak seperti Maps, WeakMaps tidak dapat diulang. Sebagai contoh,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); // looping through WeakMap for (let i of weakMap) ( console.log(i); // TypeError )
JavaScript Mapdan WeakMapdiperkenalkan di ES6 . Beberapa browser mungkin tidak mendukung penggunaannya. Untuk mempelajari lebih lanjut, kunjungi dukungan Peta JavaScript dan dukungan JavaScript WeakMap.
