10 μέθοδοι χαρτών JavaScript που πρέπει να κατακτήσετε σήμερα

Ένας χάρτης JavaScript είναι μια συλλογή που αποθηκεύει κάθε στοιχείο του ως ζεύγος κλειδιού-τιμής. Αυτός ο τύπος δεδομένων αναφέρεται επίσης ως συσχετικός πίνακας ή λεξικό.

Μπορείτε να χρησιμοποιήσετε οποιονδήποτε τύπο δεδομένων (πρωτόγονα και αντικείμενα) είτε ως κλειδί είτε ως τιμή. Το αντικείμενο Χάρτης θυμάται την αρχική σειρά εισαγωγής, αν και συνήθως θα έχετε πρόσβαση σε τιμές από το κλειδί τους.

Σε αυτό το άρθρο, θα μάθετε για δέκα μεθόδους χαρτογράφησης JavaScript που θα πρέπει να κυριαρχήσετε σήμερα.

1. Πώς να δημιουργήσετε έναν νέο χάρτη σε JavaScript

Μπορείτε να δημιουργήσετε ένα νέο αντικείμενο χάρτη χρησιμοποιώντας το Χάρτης() κατασκευαστής. Αυτός ο κατασκευαστής δέχεται μία παράμετρο: ένα επαναλαμβανόμενο αντικείμενο του οποίου τα στοιχεία είναι ζεύγη κλειδιού-τιμής.

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, «The Dark Knight»],
[2012, «The Dark Knight Rises»]
]);
console.log (mapObj);

Παραγωγή:

Χάρτης (7) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman Returns',
1995 => 'Batman Forever',
2005 => 'Batman Begins',
2008 => 'The Dark Knight',
2012 => 'The Dark Knight Rises'
}

Εάν δεν παρέχετε την παράμετρο, η JavaScript θα δημιουργήσει έναν νέο κενό Χάρτη.

ας mapObj = new Map();
console.log (mapObj);

Παραγωγή:

Χάρτης (0) {}

Εάν προσπαθήσετε να δημιουργήσετε έναν χάρτη με διπλά κλειδιά, κάθε επαναλαμβανόμενο κλειδί θα αντικαταστήσει την προηγούμενη τιμή με τη νέα τιμή.

ας mapObj = νέος χάρτης([
['key1', 'value1'],
['key2', 'value2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Παραγωγή:

Χάρτης (2) {
'key1' => 'τιμή1',
'key2' => 'newValue2'
}

Εδώ, η τιμή που αποθηκεύεται έναντι του κλειδί 2 κλειδί είναι newValue2, όχι το προηγούμενο τιμή 2.

Μπορείτε επίσης να δημιουργήσετε ένα αντικείμενο χάρτη που συγκρατεί ζεύγη κλειδιών-τιμών χρησιμοποιώντας μεικτούς τύπους δεδομένων.

ας mapObj = νέος χάρτης([
["string1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Παραγωγή:

Χάρτης (4) {
'string1' => 1,
2 => 'string2',
'string3' => 433.234,
23.56 => 45
}

2. Προσθήκη νέων στοιχείων σε ένα αντικείμενο χάρτη

Μπορείτε να προσθέσετε ένα νέο στοιχείο στο αντικείμενο χάρτη χρησιμοποιώντας το σειρά() μέθοδος. Αυτή η μέθοδος δέχεται ένα κλειδί και μια τιμή και, στη συνέχεια, προσθέτει ένα νέο στοιχείο στο αντικείμενο χάρτη. Στη συνέχεια, η μέθοδος επιστρέφει το νέο αντικείμενο Map με την προστιθέμενη αξία. Εάν το κλειδί υπάρχει ήδη στον Χάρτη, η νέα τιμή θα αντικαταστήσει την υπάρχουσα τιμή.

ας mapObj = new Map();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman Forever');
console.log (mapObj);

Παραγωγή:

Χάρτης (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman Returns',
1995 => 'Batman Forever'
}

Μπορείτε επίσης να χρησιμοποιήσετε μεταβλητές ή σταθερές ως κλειδιά ή τιμές:

const έτος1 = 1966;
const movieName1 = 'Batman: The Movie';
έστω έτος2 = 1989;
var movieName2 = 'Batman';
ας mapObj = new Map();
mapObj.set (year1, movieName1);
mapObj.set (year2, movieName2);
console.log (mapObj);

Παραγωγή:

Χάρτης (2) {
1966 => 'Batman: The Movie',
1989 => 'Batman'
}

ο σειρά() Η μέθοδος υποστηρίζει την αλυσίδα.

ας mapObj = new Map();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman Returns')
.set (1995, 'Batman Forever');
console.log (mapObj);

Παραγωγή:

Χάρτης (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batman Returns',
1995 => 'Batman Forever'
}

3. Κατάργηση όλων των στοιχείων από ένα αντικείμενο χάρτη

Μπορείτε να αφαιρέσετε όλα τα στοιχεία από ένα αντικείμενο χάρτη χρησιμοποιώντας το Σαφή() μέθοδος. Αυτή η μέθοδος επιστρέφει πάντα απροσδιόριστος.

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Μέγεθος του αντικειμένου χάρτη: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Μέγεθος του αντικειμένου χάρτη μετά την εκκαθάριση στοιχείων: " + mapObj.size);
console.log (mapObj);

Παραγωγή:

Μέγεθος αντικειμένου χάρτη: 2
Χάρτης (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Μέγεθος του αντικειμένου χάρτη μετά την εκκαθάριση στοιχείων: 0
Χάρτης (0) {}

4. Διαγραφή συγκεκριμένου στοιχείου από χάρτη

Μπορείτε να αφαιρέσετε ένα συγκεκριμένο στοιχείο από ένα αντικείμενο χάρτη χρησιμοποιώντας το διαγράφω() μέθοδος. Αυτή η μέθοδος δέχεται το κλειδί του στοιχείου προς διαγραφή από τον Χάρτη. Εάν υπάρχει το κλειδί, η μέθοδος επιστρέφει αληθής. Διαφορετικά, επιστρέφει ψευδής.

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log("Αρχικός χάρτης: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Χάρτης μετά τη διαγραφή του στοιχείου με κλειδί ως 1966");
console.log (mapObj);

Παραγωγή:

Αρχικός χάρτης:
Χάρτης (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Χάρτης μετά τη διαγραφή του στοιχείου με κλειδί ως 1966
Χάρτης (1) { 1989 => 'Batman' }

5. Ελέγξτε εάν υπάρχει ένα στοιχείο σε έναν χάρτη

Μπορείτε να ελέγξετε εάν ένα στοιχείο υπάρχει σε ένα αντικείμενο χάρτη χρησιμοποιώντας το έχει () μέθοδος. Αυτή η μέθοδος δέχεται το κλειδί του στοιχείου ως παράμετρο για έλεγχο παρουσίας στο αντικείμενο Map. Αυτή η μέθοδος επιστρέφει αληθής αν υπάρχει το κλειδί. Διαφορετικά, επιστρέφει ψευδής.

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, «The Dark Knight»],
[2012, «The Dark Knight Rises»]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Παραγωγή:

αληθής
ψευδής

Ένα στοιχείο με κλειδί 1966 υπάρχει στο αντικείμενο Map, επομένως η μέθοδος επέστρεψε αληθής. Αλλά, αφού δεν υπάρχει στοιχείο με κλειδί 1977 στο αντικείμενο Χάρτης, επέστρεψε η μέθοδος ψευδής από τη δεύτερη κλήση.

Σχετίζεται με: Τι είναι η JavaScript και πώς λειτουργεί;

6. Πρόσβαση στην τιμή για ένα συγκεκριμένο κλειδί

ο παίρνω() μέθοδος επιστρέφει ένα συγκεκριμένο στοιχείο από το αντικείμενο Map. Αυτή η μέθοδος δέχεται το κλειδί του στοιχείου ως παράμετρο. Εάν το κλειδί υπάρχει στο αντικείμενο Map, η μέθοδος επιστρέφει την τιμή του στοιχείου. Διαφορετικά, επιστρέφει απροσδιόριστος.

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, «The Dark Knight»],
[2012, «The Dark Knight Rises»]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Παραγωγή:

Batman: The Movie
απροσδιόριστος

Ένα στοιχείο με κλειδί 1966 υπάρχει στο αντικείμενο Map, επομένως η μέθοδος επέστρεψε την τιμή του στοιχείου. Δεν υπάρχει στοιχείο με κλειδί 1988 στο αντικείμενο Χάρτης, οπότε η μέθοδος επέστρεψε απροσδιόριστος.

7. Πρόσβαση στις Εγγραφές ενός Χάρτη μέσω ενός Iterator

Σύμφωνα με τον αξιωματούχο Έγγραφα Ιστού MDN:

Η μέθοδος entries() επιστρέφει ένα νέο αντικείμενο Iterator που περιέχει τα ζεύγη [key, value] για κάθε στοιχείο στο αντικείμενο Map με σειρά εισαγωγής. Στη συγκεκριμένη περίπτωση, αυτό το αντικείμενο επαναλήψεως είναι επίσης επαναλήψιμο, επομένως μπορεί να χρησιμοποιηθεί ο βρόχος for-of. Όταν χρησιμοποιείται το πρωτόκολλο [Symbol.iterator], επιστρέφει μια συνάρτηση που, όταν καλείται, επιστρέφει τον ίδιο τον επαναλήπτη.

Μπορείτε να αποκτήσετε πρόσβαση σε κάθε στοιχείο του Χάρτη χρησιμοποιώντας αυτόν τον επαναλήπτη και α για...του δήλωση:

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, «The Dark Knight»],
[2012, «The Dark Knight Rises»]
]);
για (επιτρέψτε την καταχώρηση του mapObj.entries()) {
console.log (καταχώρηση);
}

Παραγωγή:

[ 1966, 'Batman: The Movie' ]
[1989, 'Batman' ]
[ 1992, 'Batman Returns' ]
[1995, 'Batman Forever']
[2005, 'Batman Begins']
[2008, «The Dark Knight» ]
[ 2012, 'The Dark Knight Rises' ]

Ή μπορείτε να χρησιμοποιήσετε τη δυνατότητα εκχώρησης καταστροφής ES6 για πρόσβαση σε κάθε κλειδί και τιμή:

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, «The Dark Knight»],
[2012, «The Dark Knight Rises»]
]);
για (έστω [κλειδί, τιμή] του mapObj.entries()) {
console.log("Κλειδί: " + κλειδί + " Τιμή: " + τιμή);
}

Παραγωγή:

Κλειδί: 1966 Αξία: Batman: The Movie
Κλειδί: 1989 Τιμή: Μπάτμαν
Key: 1992 Value: Batman Returns
Key: 1995 Value: Batman Forever
Key: 2005 Value: Batman Begins
Key: 2008 Value: The Dark Knight
Key: 2012 Value: The Dark Knight Rises

8. Πώς να επαναλάβετε τις τιμές ενός χάρτη

ο αξίες() μέθοδος επιστρέφει an Iterator αντικείμενο που περιέχει όλες τις τιμές σε έναν χάρτη και αυτό το κάνει με σειρά εισαγωγής.

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.values();
για (έστω την τιμή του iteratorObj) {
console.log (τιμή);
}

Παραγωγή:

Batman: The Movie
Μπάτμαν
Ο Μπάτμαν επιστρέφει

9. Επανάληψη στα πλήκτρα ενός χάρτη

ο κλειδιά () μέθοδος επιστρέφει an Iterator αντικείμενο που περιέχει όλα τα κλειδιά σε έναν χάρτη και αυτό το κάνει με τη σειρά εισαγωγής.

ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.keys();
για (έστω το κλειδί του iteratorObj) {
console.log (κλειδί);
}

Παραγωγή:

1966
1989
1992

Σχετίζεται με: Οι λειτουργίες βέλους JavaScript μπορούν να σας κάνουν καλύτερο προγραμματιστή

10. Επανάληψη πάνω από στοιχεία σε έναν χάρτη χρησιμοποιώντας μια επιστροφή κλήσης

ο για κάθε() Η μέθοδος καλεί μια συνάρτηση επανάκλησης για κάθε στοιχείο του αντικειμένου χάρτη. Η λειτουργία επανάκλησης λαμβάνει δύο παραμέτρους: το κλειδί και την τιμή.

συνάρτηση printKeyValue (κλειδί, τιμή) {
console.log("Κλειδί: " + κλειδί + " Τιμή: " + τιμή);
}
ας mapObj = νέος χάρτης([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
mapObj.forEach (printKeyValue);

Παραγωγή:

Κλειδί: Batman: The Movie Value: 1966
Κλειδί: Batman Value: 1989
Κλειδί: Batman Returns Value: 1992

Τώρα ξέρετε για τους Χάρτες σε JavaScript

Τώρα έχετε αρκετές γνώσεις για να κατακτήσετε την έννοια των Χαρτών σε JavaScript. Η δομή δεδομένων χάρτη χρησιμοποιείται ευρέως σε πολλές εργασίες προγραμματισμού. Αφού το κατακτήσετε, μπορείτε να προχωρήσετε σε άλλα εγγενή αντικείμενα JavaScript όπως Sets, Arrays και ούτω καθεξής.

15 μέθοδοι συστοιχίας JavaScript που πρέπει να κατακτήσετε σήμερα

Θέλετε να κατανοήσετε τους πίνακες JavaScript αλλά δεν μπορείτε να τους χειριστείτε; Ελέγξτε τα παραδείγματα πίνακα JavaScript για καθοδήγηση.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα