Šajā apmācībā jūs uzzināsiet par JavaScript Maps un WeakMaps ar piemēru palīdzību.
JavaScript ES6 ir ieviesis divas jaunas datu struktūras, ti, Mapun WeakMap.
Karte ir līdzīga JavaScript objektiem, kas ļauj mums saglabāt elementus atslēgu / vērtību pārī.
Kartes elementi tiek ievietoti ievietošanas secībā. Tomēr atšķirībā no objekta kartē kā atslēgas var būt objekti, funkcijas un citi datu tipi.
Izveidojiet JavaScript karti
Lai izveidotu a Map, mēs izmantojam new Map()konstruktoru. Piemēram,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Ievietot vienumu kartē
Pēc kartes izveides jūs varat izmantot set()metodi, lai tajā ievietotu elementus. Piemēram,
// 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))
Objektus vai funkcijas var izmantot arī kā taustiņus. Piemēram,
// 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"))
Piekļuve kartes elementiem
MapElementiem var piekļūt, izmantojot get()metodi. Piemēram,
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")
Pārbaudiet kartes elementus
Jūs varat izmantot has()metodi, lai pārbaudītu, vai elements atrodas kartē. Piemēram,
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
Elementu noņemšana
Jūs varat izmantot clear(), un šo delete()metodi, lai novērstu elementus no kartes.
Par delete()metode atgriež true, ja norādīts atslēgu / vērtību pāri pastāv un ir izņemta vai cits atgriežas false. Piemēram,
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 ()
clear()Metodi noņem visas atslēgu / vērtību pārus no kartes objektu. Piemēram,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
JavaScript kartes izmērs
Izmantojot sizeīpašumu, kartē varat iegūt elementu skaitu . Piemēram,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Atkārtoties caur karti
Varat atkārtot kartes elementus, izmantojot for… of loop vai forEach () metodi. Elementiem var piekļūt ievietošanas secībā. Piemēram,
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); )
Rezultāts
vārds- Džeka vecums- 27 gadi
Izmantojot forEach()metodi, jūs varētu arī iegūt tādus pašus rezultātus kā iepriekš minētā programma . Piemēram,
// 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) ))
Atkārtojiet vairāk nekā kartes taustiņus
Jūs varat atkārtot karti un iegūt atslēgu, izmantojot keys()metodi. Piemēram,
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) )
Rezultāts
vārda vecums
Atkārtot kartes vērtības
Jūs varat atkārtot karti un iegūt vērtības, izmantojot values()metodi. Piemēram,
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); )
Rezultāts
Džeks 27
Iegūstiet kartes galvenās vērtības / vērtības
Izmantojot entries()metodi, varat atkārtot karti un iegūt kartes atslēgu / vērtību . Piemēram,
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))`); )
Rezultāts
vārds: Džeka vecums: 27
JavaScript karte vs objekts
| Karte | Objekts |
|---|---|
| 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 ir metodes get(), set(), delete(), un has(). Piemēram,
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 nav atkārtojami
Atšķirībā no Maps, WeakMaps nav atkārtojams. Piemēram,
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 Mapun WeakMaptika ieviesti ES6 . Dažas pārlūkprogrammas, iespējams, neatbalsta to lietošanu. Lai uzzinātu vairāk, apmeklējiet JavaScript kartes atbalstu un JavaScript WeakMap atbalstu.
