Σε αυτό το σεμινάριο, θα μάθετε για τους Χάρτες JavaScript και τους WeakMaps με τη βοήθεια παραδειγμάτων.
Το JavaScript ES6 εισήγαγε δύο νέες δομές δεδομένων, δηλαδή Mapκαι WeakMap.
Ο χάρτης είναι παρόμοιος με αντικείμενα σε JavaScript που μας επιτρέπουν να αποθηκεύουμε στοιχεία σε ένα ζεύγος κλειδιών / τιμών .
Τα στοιχεία σε έναν χάρτη εισάγονται με σειρά εισαγωγής. Ωστόσο, σε αντίθεση με ένα αντικείμενο, ένας χάρτης μπορεί να περιέχει αντικείμενα, λειτουργίες και άλλους τύπους δεδομένων ως κλειδί.
Δημιουργία χάρτη JavaScript
Για να δημιουργήσουμε ένα Map, χρησιμοποιούμε τον new Map()κατασκευαστή. Για παράδειγμα,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Εισαγωγή αντικειμένου στο χάρτη
Αφού δημιουργήσετε έναν χάρτη, μπορείτε να χρησιμοποιήσετε τη set()μέθοδο για να εισαγάγετε στοιχεία σε αυτόν. Για παράδειγμα,
// 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))
Μπορείτε επίσης να χρησιμοποιήσετε αντικείμενα ή λειτουργίες ως πλήκτρα. Για παράδειγμα,
// 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"))
Πρόσβαση στα στοιχεία χάρτη
Μπορείτε να αποκτήσετε πρόσβαση σε Mapστοιχεία χρησιμοποιώντας τη get()μέθοδο. Για παράδειγμα,
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")
Ελέγξτε τα στοιχεία χάρτη
Μπορείτε να χρησιμοποιήσετε τη has()μέθοδο για να ελέγξετε εάν το στοιχείο βρίσκεται σε χάρτη. Για παράδειγμα,
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
Κατάργηση στοιχείων
Μπορείτε να χρησιμοποιήσετε τη μέθοδο clear()και τη delete()μέθοδο για την κατάργηση στοιχείων από έναν χάρτη
Η delete()μέθοδος επιστρέφει trueεάν υπάρχει ένα καθορισμένο ζεύγος κλειδιών / τιμών και έχει αφαιρεθεί ή επιστρέφει αλλιώς false. Για παράδειγμα,
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()μέθοδος αφαιρεί όλα τα ζεύγη κλειδιών / τιμών από ένα αντικείμενο χάρτη. Για παράδειγμα,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
Μέγεθος χάρτη JavaScript
Μπορείτε να λάβετε τον αριθμό των στοιχείων σε έναν χάρτη χρησιμοποιώντας την sizeιδιότητα. Για παράδειγμα,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Επανάληψη μέσω χάρτη
Μπορείτε να επαναλάβετε τα στοιχεία του Χάρτη χρησιμοποιώντας τη μέθοδο για… of loop ή forEach (). Η πρόσβαση στα στοιχεία γίνεται με τη σειρά εισαγωγής. Για παράδειγμα,
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); )
Παραγωγή
όνομα - Jack ηλικίας - 27
Θα μπορούσατε επίσης να έχετε τα ίδια αποτελέσματα με το παραπάνω πρόγραμμα χρησιμοποιώντας τη forEach()μέθοδο. Για παράδειγμα,
// 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) ))
Επαναλάβετε τα πλήκτρα χάρτη
Μπορείτε να επαναλάβετε τον χάρτη και να λάβετε το κλειδί χρησιμοποιώντας τη keys()μέθοδο. Για παράδειγμα,
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) )
Παραγωγή
όνομα ηλικία
Επαναλάβετε τις τιμές χάρτη
Μπορείτε να επαναλάβετε τον χάρτη και να λάβετε τις τιμές χρησιμοποιώντας τη values()μέθοδο. Για παράδειγμα,
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); )
Παραγωγή
Τζακ 27
Λήψη κλειδιού / τιμών χάρτη
Μπορείτε να επαναλάβετε τον χάρτη και να λάβετε το κλειδί / την τιμή ενός Χάρτη χρησιμοποιώντας τη entries()μέθοδο. Για παράδειγμα,
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))`); )
Παραγωγή
Όνομα: Jack ηλικία: 27
Χάρτης JavaScript εναντίον αντικειμένου
| Χάρτης | Αντικείμενο |
|---|---|
| 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 έχουν μεθόδους get(), set(), delete(), και has(). Για παράδειγμα,
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 δεν είναι επαναλαμβανόμενοι
Σε αντίθεση με τους Χάρτες, το WeakMaps δεν είναι επαναλαμβανόμενο. Για παράδειγμα,
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και WeakMapεισήχθησαν στο ES6 . Ορισμένα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν τη χρήση τους. Για να μάθετε περισσότερα, επισκεφθείτε την υποστήριξη χάρτη JavaScript και την υποστήριξη WeakMap JavaScript.
