10 metodi di mappa JavaScript che dovresti padroneggiare oggi

Una mappa JavaScript è una raccolta che memorizza ciascuno dei suoi elementi come coppia chiave-valore. Questo tipo di dati viene anche chiamato array associativo o dizionario.

È possibile utilizzare qualsiasi tipo di dati (primitive e oggetti) come chiave o valore. L'oggetto Map ricorda l'ordine di inserimento originale, anche se in genere si accede ai valori tramite la loro chiave.

In questo articolo imparerai a conoscere dieci metodi JavaScript Map che dovresti padroneggiare oggi.

1. Come creare una nuova mappa in JavaScript

Puoi creare un nuovo oggetto Mappa usando il pulsante Carta geografica() costruttore. Questo costruttore accetta un parametro: un oggetto iterabile i cui elementi sono coppie chiave-valore.

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman'],
[1992, "Il ritorno di Batman"],
[1995, "Batman per sempre"],
[2005, "L'inizio di Batman"],
[2008, "Il cavaliere oscuro"],
[2012, "Il cavaliere oscuro - Il ritorno"]
]);
console.log (mapObj);

Produzione:

Mappa (7) {





instagram viewer


1966 => 'Batman: il film',
1989 => 'Batman',
1992 => 'Il ritorno di Batman',
1995 => 'Batman per sempre',
2005 => 'Batman inizia',
2008 => 'Il Cavaliere Oscuro',
2012 => 'Il Cavaliere Oscuro Il Ritorno'
}

Se non fornisci il parametro, JavaScript creerà una nuova mappa vuota.

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

Produzione:

Mappa (0) {}

Se provi a creare una mappa con chiavi duplicate, ogni chiave ripetuta sovrascriverà il valore precedente con il nuovo valore.

let mapObj = new Map([
['chiave1', 'valore1'],
['chiave2', 'valore2'],
['chiave2', 'nuovoValore2']
]);
console.log (mapObj);

Produzione:

Mappa (2) {
'key1' => 'value1',
'key2' => 'newValue2'
}

Qui, il valore memorizzato contro il tasto2 la chiave è nuovoValore2, non la prima valore2.

Puoi anche creare un oggetto Map che contenga coppie chiave-valore utilizzando tipi di dati misti.

let mapObj = new Map([
["stringa1", 1],
[2, "stringa2"],
["stringa3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Produzione:

Mappa (4) {
'string1' => 1,
2 => 'stringa2',
'string3' => 433.234,
23.56 => 45
}

2. Aggiungi nuovi elementi a un oggetto mappa

Puoi aggiungere un nuovo elemento all'oggetto Mappa usando il pulsante set() metodo. Questo metodo accetta una chiave e un valore, quindi aggiunge un nuovo elemento all'oggetto Map. Il metodo restituisce quindi il nuovo oggetto Map con il valore aggiunto. Se la chiave esiste già nella mappa, il nuovo valore sostituirà il valore esistente.

let mapObj = new Map();
mapObj.set (1966, 'Batman: Il film');
mapObj.set (1989, "Batman");
mapObj.set (1992, "Il ritorno di Batman");
mapObj.set (1995, "Batman per sempre");
console.log (mapObj);

Produzione:

Mappa (4) {
1966 => 'Batman: il film',
1989 => 'Batman',
1992 => 'Il ritorno di Batman',
1995 => 'Batman per sempre'
}

Puoi anche usare variabili o costanti come chiavi o valori:

cost anno1 = 1966;
const movieName1 = 'Batman: il film';
sia anno2 = 1989;
var movieName2 = 'Batman';
let mapObj = new Map();
mapObj.set (anno1, nomefilm1);
mapObj.set (anno2, nomefilm2);
console.log (mapObj);

Produzione:

Mappa (2) {
1966 => 'Batman: il film',
1989 => 'Batman'
}

Il set() il metodo supporta il concatenamento.

let mapObj = new Map();
mapObj.set (1966, 'Batman: Il film')
.set (1989, 'Batman')
.set (1992, "Il ritorno di Batman")
.set (1995, "Batman per sempre");
console.log (mapObj);

Produzione:

Mappa (4) {
1966 => 'Batman: il film',
1989 => 'Batman',
1992 => 'Il ritorno di Batman',
1995 => 'Batman per sempre'
}

3. Rimuovi tutti gli elementi da un oggetto mappa

Puoi rimuovere tutti gli elementi da un oggetto Mappa usando il pulsante chiaro() metodo. Questo metodo restituisce sempre non definito.

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman']
]);
console.log("Dimensione dell'oggetto Mappa: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Dimensione dell'oggetto Map dopo aver cancellato gli elementi: " + mapObj.size);
console.log (mapObj);

Produzione:

Dimensione dell'oggetto Mappa: 2
Mappa (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Dimensione dell'oggetto Mappa dopo aver cancellato gli elementi: 0
Mappa (0) {}

4. Elimina un elemento specifico da una mappa

Puoi rimuovere un elemento specifico da un oggetto Mappa usando il pulsante Elimina() metodo. Questo metodo accetta la chiave dell'elemento da eliminare dalla mappa. Se la chiave esiste, il metodo restituisce vero. Altrimenti ritorna falso.

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman']
]);
console.log("Mappa iniziale: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Mappa dopo aver cancellato l'elemento con chiave come 1966");
console.log (mapObj);

Produzione:

Mappa iniziale:
Mappa (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Mappa dopo aver eliminato l'elemento con chiave come 1966
Mappa (1) { 1989 => 'Batman' }

5. Controlla se un elemento esiste in una mappa

Puoi controllare se un elemento esiste in un oggetto Map usando il pulsante ha() metodo. Questo metodo accetta la chiave dell'elemento come parametro per verificare la presenza nell'oggetto Map. Questo metodo restituisce vero se la chiave esiste. Altrimenti ritorna falso.

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman'],
[1992, "Il ritorno di Batman"],
[1995, "Batman per sempre"],
[2005, "L'inizio di Batman"],
[2008, "Il cavaliere oscuro"],
[2012, "Il cavaliere oscuro - Il ritorno"]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Produzione:

vero
falso

Un elemento con chiave 1966 esiste nell'oggetto Map, quindi il metodo restituito vero. Ma, poiché non c'è alcun elemento con chiave 1977 nell'oggetto Map, il metodo restituito falso dalla seconda convocazione.

Imparentato: Che cos'è JavaScript e come funziona?

6. Accesso al valore per una chiave specifica

Il ottenere() Il metodo restituisce un elemento specifico dall'oggetto Map. Questo metodo accetta la chiave dell'elemento come parametro. Se la chiave esiste nell'oggetto Map, il metodo restituisce il valore dell'elemento. Altrimenti ritorna non definito.

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman'],
[1992, "Il ritorno di Batman"],
[1995, "Batman per sempre"],
[2005, "L'inizio di Batman"],
[2008, "Il cavaliere oscuro"],
[2012, "Il cavaliere oscuro - Il ritorno"]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Produzione:

Batman: il film
non definito

Un elemento con chiave 1966 esiste nell'oggetto Map, quindi il metodo ha restituito il valore dell'elemento. Non c'è nessun elemento con chiave 1988 nell'oggetto Map, quindi il metodo restituito non definito.

7. Accedi alle voci di una mappa tramite un iteratore

Secondo il funzionario Documenti Web MDN:

Il metodo entry() restituisce un nuovo oggetto Iterator che contiene le coppie [chiave, valore] per ogni elemento nell'oggetto Map in ordine di inserimento. In questo caso particolare, anche questo oggetto iteratore è iterabile, quindi è possibile utilizzare il ciclo for-of. Quando viene utilizzato il protocollo [Symbol.iterator], restituisce una funzione che, quando invocata, restituisce questo iteratore stesso.

Puoi accedere a ogni elemento della mappa usando questo iteratore e un per...di dichiarazione:

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman'],
[1992, "Il ritorno di Batman"],
[1995, "Batman per sempre"],
[2005, "L'inizio di Batman"],
[2008, "Il cavaliere oscuro"],
[2012, "Il cavaliere oscuro - Il ritorno"]
]);
for (let entry di mapObj.entries()) {
console.log (voce);
}

Produzione:

[ 1966, "Batman: il film" ]
[ 1989, 'Batman' ]
[ 1992, "Il ritorno di Batman" ]
[ 1995, "Batman per sempre"]
[2005, 'Batman inizia']
[ 2008, 'Il cavaliere oscuro']
[ 2012, 'Il cavaliere oscuro - Il ritorno']

Oppure puoi utilizzare la funzione di assegnazione di distruzione di ES6 per accedere a ciascuna chiave e valore:

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman'],
[1992, "Il ritorno di Batman"],
[1995, "Batman per sempre"],
[2005, "L'inizio di Batman"],
[2008, "Il cavaliere oscuro"],
[2012, "Il cavaliere oscuro - Il ritorno"]
]);
for (let [chiave, valore] di mapObj.entries()) {
console.log("Chiave: " + tasto + " Valore: " + valore);
}

Produzione:

Legenda: 1966 Valore: Batman: The Movie
Legenda: 1989 Valore: Batman
Legenda: 1992 Valore: Batman Returns
Legenda: 1995 Valore: Batman Forever
Legenda: 2005 Valore: Batman Begins
Legenda: Valore 2008: Il cavaliere oscuro
Legenda: Valore 2012: Il cavaliere oscuro - Il ritorno

8. Come scorrere i valori di una mappa

Il valori() il metodo restituisce an Iteratore oggetto che contiene tutti i valori in una mappa e lo fa in ordine di inserimento.

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman'],
[1992, 'Il ritorno di Batman']
]);
const iteratorObj = mapObj.values();
for (let value of iteratorObj) {
console.log (valore);
}

Produzione:

Batman: il film
Batman
Il ritorno di Batman

9. Iterare sulle chiavi di una mappa

Il chiavi() il metodo restituisce an Iteratore oggetto che contiene tutte le chiavi in ​​una mappa, e lo fa in ordine di inserimento.

let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman'],
[1992, 'Il ritorno di Batman']
]);
const iteratorObj = mapObj.keys();
for (let key of iteratorObj) {
console.log (chiave);
}

Produzione:

1966
1989
1992

Imparentato: Le funzioni freccia JavaScript possono renderti uno sviluppatore migliore

10. Iterare su elementi in una mappa utilizzando un callback

Il per ciascuno() Il metodo invoca una funzione di callback per ogni elemento dell'oggetto Map. La funzione di callback accetta due parametri: la chiave e il valore.

funzione printKeyValue (chiave, valore) {
console.log("Chiave: " + tasto + " Valore: " + valore);
}
let mapObj = new Map([
[1966, "Batman: il film"],
[1989, 'Batman'],
[1992, 'Il ritorno di Batman']
]);
mapObj.forEach (printKeyValue);

Produzione:

Legenda: Batman: The Movie Valore: 1966
Chiave: Batman Valore: 1989
Legenda: Batman Returns Valore: 1992

Ora conosci le mappe in JavaScript

Ora hai abbastanza conoscenze per padroneggiare il concetto di Maps in JavaScript. La struttura dei dati della mappa è ampiamente utilizzata in molte attività di programmazione. Una volta che l'hai imparato, puoi passare ad altri oggetti JavaScript nativi come Sets, Array e così via.

15 metodi di array JavaScript che dovresti padroneggiare oggi

Vuoi capire gli array JavaScript ma non riesci a fare i conti con loro? Controlla i nostri esempi di array JavaScript per assistenza.

Leggi Avanti

Circa l'autore