În acest tutorial, veți afla despre JavaScript Maps și WeakMaps cu ajutorul unor exemple.
JavaScript ES6 a introdus două noi structuri de date, adică Mapși WeakMap.
Harta este similară cu obiectele din JavaScript, care ne permite să stocăm elemente într-o pereche cheie / valoare .
Elementele dintr-o hartă sunt inserate într-o ordine de inserare. Cu toate acestea, spre deosebire de un obiect, o hartă poate conține obiecte, funcții și alte tipuri de date ca cheie.
Creați o hartă JavaScript
Pentru a crea un Map, folosim new Map()constructorul. De exemplu,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Introduceți elementul pe hartă
După ce creați o hartă, puteți utiliza set()metoda pentru a insera elemente în ea. De exemplu,
// 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))
De asemenea, puteți utiliza obiecte sau funcții ca taste. De exemplu,
// 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"))
Elemente de hartă de acces
Puteți accesa Mapelemente folosind get()metoda. De exemplu,
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")
Verificați elementele hărții
Puteți utiliza has()metoda pentru a verifica dacă elementul se află într-o hartă. De exemplu,
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
Eliminarea elementelor
Puteți utiliza clear()și delete()metoda pentru a elimina elemente dintr-o hartă.
În delete()metoda returneaza truedaca o pereche de chei / valoare specificată există și a fost eliminat sau se întoarce altceva false. De exemplu,
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()Metoda elimină toate perechile cheie / valoare dintr - un obiect hartă. De exemplu,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
Dimensiunea hărții JavaScript
Puteți obține numărul de elemente dintr-o hartă folosind sizeproprietatea. De exemplu,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Iterează printr-o hartă
Puteți itera prin elementele Hărții folosind metoda for … of loop sau forEach (). Elementele sunt accesate în ordinea de inserare. De exemplu,
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); )
Ieșire
nume- Jack vârsta- 27 de ani
De asemenea, puteți obține aceleași rezultate ca și programul de mai sus folosind forEach()metoda. De exemplu,
// 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) ))
Iterează peste tastele hărții
Puteți itera pe hartă și obține cheia folosind keys()metoda. De exemplu,
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) )
Ieșire
numele vârstei
Iterează peste valorile hărții
Puteți itera peste hartă și obține valorile folosind values()metoda. De exemplu,
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); )
Ieșire
Jack 27
Obțineți cheia / valorile hărții
Puteți itera peste hartă și puteți obține cheia / valoarea unei hărți folosind entries()metoda. De exemplu,
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))`); )
Ieșire
nume: Jack vârsta: 27 de ani
JavaScript Map vs Object
| Hartă | Obiect |
|---|---|
| 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 au metode get(), set(), delete()și has(). De exemplu,
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 nu este iterabil
Spre deosebire de Maps, WeakMaps nu sunt iterabile. De exemplu,
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 Mapși WeakMapau fost introduse în ES6 . Este posibil ca unele browsere să nu le accepte utilizarea. Pentru a afla mai multe, vizitați asistența JavaScript Map și asistența JavaScript WeakMap.
