Dalam tutorial ini, anda akan belajar mengenai Peta JavaScript dan Peta Lemah dengan bantuan contoh.
JavaScript ES6 telah memperkenalkan dua struktur data baru, iaitu Mapdan WeakMap.
Peta serupa dengan objek dalam JavaScript yang memungkinkan kita menyimpan elemen dalam pasangan kunci / nilai .
Unsur-unsur dalam Peta dimasukkan dalam urutan penyisipan. Namun, tidak seperti objek, peta dapat berisi objek, fungsi dan jenis data lain sebagai kunci.
Buat Peta JavaScript
Untuk membuat Map, kita menggunakan new Map()konstruktor. Sebagai contoh,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Masukkan Item ke Peta
Selepas anda membuat peta, anda boleh menggunakan set()kaedah untuk memasukkan unsur 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 boleh menggunakan objek atau fungsi sebagai kunci. 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 boleh mengakses Mapelemen menggunakan get()kaedah. 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 boleh menggunakan has()kaedah untuk memeriksa apakah elemen tersebut ada 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
Mengeluarkan Elemen
Anda boleh menggunakan clear()dan delete()kaedah untuk membuang elemen dari Peta
The delete()pulangan kaedah truejika pasangan kunci / nilai ditentukan wujud dan telah dikeluarkan atau pulangan pun 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()kaedah membuang semua pasangan kunci / nilai daripada Peta objek. 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 boleh mendapatkan jumlah elemen dalam Peta menggunakan sizeharta tanah. Sebagai contoh,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Mengulangi Melalui Peta
Anda dapat melakukan iterasi melalui elemen Peta menggunakan kaedah untuk… of loop atau forEach (). Unsur-unsur 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); )
Pengeluaran
nama- Jack umur- 27
Anda juga boleh mendapatkan hasil yang sama dengan program di atas menggunakan forEach()kaedah. 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) ))
Mengulangi Kekunci Peta
Anda boleh melakukan lelaran ke atas Peta dan mendapatkan kuncinya menggunakan keys()kaedah tersebut. 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) )
Pengeluaran
umur nama
Mengulangi Nilai Peta
Anda boleh melakukan lelaran ke atas Peta dan mendapatkan nilai menggunakan values()kaedah tersebut. 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); )
Pengeluaran
Jack 27
Dapatkan Kunci / Nilai Peta
Anda boleh melakukan iterasi di atas Peta dan mendapatkan kunci / nilai Peta menggunakan entries()kaedah. 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))`); )
Pengeluaran
nama: Jack umur: 27 tahun
Peta JavaScript vs Objek
| Peta | Objek |
|---|---|
| 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 mempunyai kaedah 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 Boleh Digunakan
Tidak seperti Peta, WeakMaps tidak boleh berulang. 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 pada ES6 . Beberapa penyemak imbas mungkin tidak menyokong penggunaannya. Untuk mengetahui lebih lanjut, kunjungi sokongan Peta JavaScript dan sokongan Peta Lemah JavaScript.
