10 metode de hartă JavaScript pe care ar trebui să le stăpâniți astăzi

O hartă JavaScript este o colecție care stochează fiecare dintre elementele sale ca o pereche cheie-valoare. Acest tip de date este denumit și matrice asociativă sau dicționar.

Puteți utiliza orice tip de date (primitive și obiecte) fie ca cheie, fie ca valoare. Obiectul Hartă își amintește ordinea inițială de inserare, deși de obicei veți accesa valorile prin cheia lor.

În acest articol, veți afla despre zece metode JavaScript Map pe care ar trebui să le stăpâniți astăzi.

1. Cum se creează o hartă nouă în JavaScript

Puteți crea un nou obiect Hartă folosind Hartă() constructor. Acest constructor acceptă un parametru: un obiect iterabil ale cărui elemente sunt perechi cheie-valoare.

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”],
[1992, „Batman Returns”],
[1995, „Batman Forever”],
[2005, „Batman Begins”],
[2008, „Cavalerul Întunecat”],
[2012, „The Dark Knight Rises”]
]);
console.log (mapObj);

Ieșire:

Harta (7) {
1966 => 'Batman: Filmul',
1989 => 'Batman',
1992 => „Batman se întoarce”,





instagram viewer


1995 => „Batman pentru totdeauna”,
2005 => „Batman Begins”,
2008 => „Cavalerul Întunecat”,
2012 => „The Dark Knight Rises”
}

Dacă nu furnizați parametrul, JavaScript va crea o nouă hartă goală.

let mapObj = new Map();
console.log (mapObj);

Ieșire:

Hartă (0) {}

Dacă încercați să creați o hartă cu chei duplicate, fiecare cheie repetată va suprascrie valoarea anterioară cu noua valoare.

let mapObj = hartă nouă([
['key1', 'value1'],
['key2', 'value2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Ieșire:

Harta (2) {
'key1' => 'valoare1',
'key2' => 'newValue2'
}

Aici, valoarea stocată față de tasta 2 cheia este NewValue2, nu mai devreme valoarea2.

De asemenea, puteți crea un obiect Hartă care conține perechi cheie-valoare folosind tipuri de date mixte.

let mapObj = hartă nouă([
[„șir1”, 1],
[2, „șir2”],
[„string3”, 433.234],
[23.56, 45]
]);
console.log (mapObj);

Ieșire:

Harta (4) {
'string1' => 1,
2 => 'șir2',
'string3' => 433.234,
23.56 => 45
}

2. Adăugați elemente noi la un obiect hartă

Puteți adăuga un nou element la obiectul Hartă folosind a stabilit() metodă. Această metodă acceptă o cheie și o valoare, apoi adaugă un nou element la obiectul Map. Metoda returnează apoi noul obiect Map cu valoarea adăugată. Dacă cheia există deja în Hartă, noua valoare va înlocui valoarea existentă.

let 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);

Ieșire:

Harta (4) {
1966 => 'Batman: Filmul',
1989 => 'Batman',
1992 => „Batman se întoarce”,
1995 => „Batman pentru totdeauna”
}

De asemenea, puteți utiliza variabile sau constante ca chei sau valori:

const year1 = 1966;
const movieName1 = 'Batman: Filmul';
fie anul2 = 1989;
var movieName2 = 'Batman';
let mapObj = new Map();
mapObj.set (anul 1, numele filmului 1);
mapObj.set (an2, filmName2);
console.log (mapObj);

Ieșire:

Harta (2) {
1966 => 'Batman: Filmul',
1989 => „Batman”
}

The a stabilit() metoda acceptă înlănțuirea.

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

Ieșire:

Harta (4) {
1966 => 'Batman: Filmul',
1989 => 'Batman',
1992 => „Batman se întoarce”,
1995 => „Batman pentru totdeauna”
}

3. Eliminați toate elementele dintr-un obiect hartă

Puteți elimina toate elementele dintr-un obiect Hartă folosind clar() metodă. Această metodă revine întotdeauna nedefinit.

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”]
]);
console.log("Dimensiunea obiectului Map: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Mărimea obiectului Map după ștergerea elementelor: " + mapObj.size);
console.log (mapObj);

Ieșire:

Dimensiunea obiectului Hartă: 2
Harta (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Dimensiunea obiectului Hartă după ștergerea elementelor: 0
Hartă (0) {}

4. Ștergeți un anumit element de pe o hartă

Puteți elimina un anumit element dintr-un obiect Hartă folosind șterge() metodă. Această metodă acceptă cheia elementului de șters de pe Hartă. Dacă cheia există, metoda revine Adevărat. În caz contrar, se întoarce fals.

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”]
]);
console.log("Harta inițială: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Harta după ștergerea elementului având cheia ca 1966");
console.log (mapObj);

Ieșire:

Harta initiala:
Harta (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Hartă după ștergerea elementului având cheia ca 1966
Harta (1) { 1989 => 'Batman' }

5. Verificați dacă un element există într-o hartă

Puteți verifica dacă un element există într-un obiect Map folosind are() metodă. Această metodă acceptă cheia elementului ca parametru pentru a testa prezența în obiectul Map. Această metodă revine Adevărat dacă cheia există. În caz contrar, se întoarce fals.

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”],
[1992, „Batman Returns”],
[1995, „Batman Forever”],
[2005, „Batman Begins”],
[2008, „Cavalerul Întunecat”],
[2012, „The Dark Knight Rises”]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Ieșire:

Adevărat
fals

Un element cu cheie 1966 există în obiectul Map, deci metoda a fost returnată Adevărat. Dar, din moment ce nu există niciun element cu cheie 1977 în obiectul Map, metoda a returnat fals de la al doilea apel.

Legate de: Ce este JavaScript și cum funcționează?

6. Accesarea valorii pentru o anumită cheie

The obține() metoda returnează un element specific din obiectul Map. Această metodă acceptă cheia elementului ca parametru. Dacă cheia există în obiectul Map, metoda returnează valoarea elementului. În caz contrar, se întoarce nedefinit.

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”],
[1992, „Batman Returns”],
[1995, „Batman Forever”],
[2005, „Batman Begins”],
[2008, „Cavalerul Întunecat”],
[2012, „The Dark Knight Rises”]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Ieșire:

Batman: Filmul
nedefinit

Un element cu cheie 1966 există în obiectul Map, deci metoda a returnat valoarea elementului. Nu există niciun element cu cheie 1988 în obiectul Map, deci metoda a revenit nedefinit.

7. Accesați intrările unei hărți printr-un iterator

Potrivit oficialului MDN Web Docs:

Metoda entries() returnează un nou obiect Iterator care conține perechile [cheie, valoare] pentru fiecare element din obiectul Map în ordinea inserării. În acest caz particular, acest obiect iterator este, de asemenea, iterabil, astfel încât bucla for-of poate fi utilizată. Când se utilizează protocolul [Symbol.iterator], acesta returnează o funcție care, atunci când este invocată, returnează însuși acest iterator.

Puteți accesa fiecare element al hărții folosind acest iterator și a pentru...de afirmație:

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”],
[1992, „Batman Returns”],
[1995, „Batman Forever”],
[2005, „Batman Begins”],
[2008, „Cavalerul Întunecat”],
[2012, „The Dark Knight Rises”]
]);
pentru (lasă intrarea mapObj.entries()) {
console.log (intrare);
}

Ieșire:

[ 1966, „Batman: The Movie” ]
[ 1989, „Batman” ]
[ 1992, „Batman Returns” ]
[ 1995, „Batman Forever” ]
[ 2005, „Batman Begins” ]
[ 2008, „Cavalerul Întunecat”]
[ 2012, „The Dark Knight Rises” ]

Sau puteți utiliza caracteristica de alocare a distrugerii ES6 pentru a accesa fiecare cheie și valoare:

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”],
[1992, „Batman Returns”],
[1995, „Batman Forever”],
[2005, „Batman Begins”],
[2008, „Cavalerul Întunecat”],
[2012, „The Dark Knight Rises”]
]);
pentru (lasă [cheie, valoare] din mapObj.entries()) {
console.log("Cheie: " + cheie + " Valoare: " + valoare);
}

Ieșire:

Cheie: 1966 Valoare: Batman: The Movie
Cheie: 1989 Valoare: Batman
Cheie: 1992 Valoare: Batman Returns
Cheie: 1995 Valoare: Batman Forever
Cheie: 2005 Valoare: Batman Begins
Cheie: 2008 Valoare: The Dark Knight
Cheie: 2012 Valoare: The Dark Knight Rises

8. Cum să repeți peste valorile unei hărți

The valori () metoda returnează un Iterator obiect care conține toate valorile dintr-o hartă și face acest lucru în ordinea de inserare.

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”],
[1992, „Batman Returns”]
]);
const iteratorObj = mapObj.values();
pentru (fie valoarea lui iteratorObj) {
console.log (valoare);
}

Ieșire:

Batman: Filmul
Batman
Batman se întoarce

9. Iterați peste cheile unei hărți

The chei() metoda returnează un Iterator obiect care conține toate cheile dintr-o hartă și face acest lucru în ordinea de inserare.

let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”],
[1992, „Batman Returns”]
]);
const iteratorObj = mapObj.keys();
pentru (lasă cheia lui iteratorObj) {
console.log (cheie);
}

Ieșire:

1966
1989
1992

Legate de: Funcțiile săgeții JavaScript vă pot face un dezvoltator mai bun

10. Iterați peste elemente dintr-o hartă folosind un apel invers

The pentru fiecare() metoda invocă o funcție de apel invers pentru fiecare element al obiectului Map. Funcția de apel invers ia doi parametri: cheia și valoarea.

funcția printKeyValue (cheie, valoare) {
console.log("Cheie: " + cheie + " Valoare: " + valoare);
}
let mapObj = hartă nouă([
[1966, „Batman: The Movie”],
[1989, „Batman”],
[1992, „Batman Returns”]
]);
mapObj.forEach (printKeyValue);

Ieșire:

Cheie: Batman: The Movie Value: 1966
Cheie: Batman Valoare: 1989
Cheie: Batman Returns Valoare: 1992

Acum știți despre Hărți în JavaScript

Acum aveți suficiente cunoștințe pentru a stăpâni conceptul de Hărți în JavaScript. Structura de date Map este utilizată pe scară largă în multe sarcini de programare. Odată ce l-ați stăpânit, puteți trece la alte obiecte JavaScript native, cum ar fi seturi, matrice și așa mai departe.

15 metode JavaScript Array pe care ar trebui să le stăpâniți astăzi

Doriți să înțelegeți matricele JavaScript, dar nu le puteți înțelege? Consultați exemplele noastre de matrice JavaScript pentru îndrumare.

Citiți în continuare

Despre autor