Tässä opetusohjelmassa opit JavaScript Mapsista ja WeakMapsista esimerkkien avulla.
JavaScript ES6 on ottanut käyttöön kaksi uutta tietorakennetta, eli Mapja WeakMap.
Kartta on samanlainen kuin JavaScriptin kohteet, joiden avulla voimme tallentaa elementtejä avain / arvo- pariin.
Kartan elementit lisätään lisäysjärjestyksessä. Toisin kuin esine, kartta voi kuitenkin sisältää avaimet kohteena, toiminnot ja muut tietotyypit.
Luo JavaScript-kartta
Luodaksemme a Map, käytämme new Map()konstruktoria. Esimerkiksi,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Lisää kohde karttaan
Kun olet luonut kartan, voit set()lisätä menetelmää siihen elementtien lisäämiseen. Esimerkiksi,
// 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))
Voit myös käyttää esineitä tai toimintoja näppäiminä. Esimerkiksi,
// 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"))
Käytä kartan elementtejä
Voit käyttää Mapelementtejä get()menetelmällä. Esimerkiksi,
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")
Tarkista kartan elementit
Voit käyttää has()menetelmää tarkistaa, jos elementti on kartalla. Esimerkiksi,
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
Elementtien poistaminen
Voit käyttää clear()ja delete()-menetelmää elementtien poistamiseksi kartasta.
delete()Menetelmä palaa true, jos tietyn avain / arvo-pari on olemassa ja on poistettu tai muuten palaa false. Esimerkiksi,
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()Menetelmä poistaa kaikki avain / arvo-pareja karttakohteesta esine. Esimerkiksi,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
JavaScript-kartan koko
Voit saada kartan elementtien määrän sizeomaisuutta käyttämällä . Esimerkiksi,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Toista kartan kautta
Voit toistaa karttaelementtien läpi käyttämällä silmukan for… -silmukkaa tai forEach () -menetelmää. Elementteihin pääsee lisäysjärjestyksessä. Esimerkiksi,
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); )
Tuotos
nimi- Jack ikä- 27
Voit myös saada samat tulokset kuin yllä oleva forEach()menetelmä menetelmällä. Esimerkiksi,
// 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) ))
Toista karttanäppäimet
Voit toistaa kartan ja saada avaimen keys()menetelmällä. Esimerkiksi,
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) )
Tuotos
nimi Ikä
Toista kartan arvot
Voit toistaa kartan ja saada arvot values()menetelmällä. Esimerkiksi,
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); )
Tuotos
Tunkki 27
Hanki kartan avaimet / arvot
Voit toistaa kartan ja saada kartan avain / arvon entries()menetelmällä. Esimerkiksi,
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))`); )
Tuotos
nimi: Jack ikä: 27
JavaScript-kartta vs objekti
| Kartta | Esine |
|---|---|
| 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 ovat menetelmät get(), set(), delete(), ja has(). Esimerkiksi,
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 ()
Heikkokartat eivät ole toistettavissa
Toisin kuin Maps, WeakMaps ei ole toistettavissa. Esimerkiksi,
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 Mapja WeakMapesiteltiin ES6: ssa . Jotkin selaimet eivät ehkä tue niiden käyttöä. Jos haluat lisätietoja, käy JavaScript-kartan tuessa ja JavaScript WeakMap -tuessa.
