Metodi Map JavaScript

il metodo new Map()

Puoi passare un array a new Map() Il costruttore viene utilizzato per creare una Map:

istanza

// Creazione di una Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Prova tu stesso

Map.get()

Puoi utilizzare get() Il metodo recupera il valore di una chiave nella Map:

istanza

fruits.get("apples");

Prova tu stesso

Map.set()

Puoi utilizzare set() Il metodo aggiunge un elemento alla Map:

istanza

// Creazione di una Map
const fruits = new Map();
// imposta il valore della Map
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Prova tu stesso

set() Il metodo può anche essere utilizzato per modificare i valori esistenti nella Map:

istanza

fruits.set("apples", 500);

Prova tu stesso

Map.size

size L'attributo restituisce il numero di elementi nella Map:

istanza

fruits.size;

Prova tu stesso

Map.delete()

delete() Il metodo rimuove un elemento dalla Map:

istanza

fruits.delete("apples");

Prova tu stesso

Map.clear()

clear() Il metodo rimuove tutti gli elementi dalla Map:

istanza

fruits.clear();

Prova tu stesso

Map.has()

Se esiste una chiave nella Map:has() Il metodo restituisce true:

istanza

fruits.has("apples");

Prova tu stesso

Prova il seguente codice:

fruits.delete("apples");
fruits.has("apples");

Prova tu stesso

Map.forEach()

forEach() Il metodo chiama la funzione di callback per ogni coppia di chiave-valore nella Map:

istanza

// elenca tutti gli elementi
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

Prova tu stesso

Map.entries()

entries() Il metodo restituisce un array contenente [key, value] l'oggetto iteratore corretto:

istanza

// elenca tutti gli elementi
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Prova tu stesso

Map.keys()

keys() Il metodo restituisce un oggetto iteratore contenente le chiavi della Map:

istanza

// elenca tutte le chiavi
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Prova tu stesso

Map.values()

values() Il metodo restituisce un oggetto iteratore contenente i valori della Map:

istanza

// Elenco di tutti i valori
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Prova tu stesso

Puoi utilizzare values() Il metodo somma i valori nella Map:

istanza

// Somma di tutti i valori
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Prova tu stesso

Oggetti come chiavi

Suggerimento:L'abilità di utilizzare oggetti come chiave è una caratteristica importante della Map.

istanza

// Creazione di oggetti
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Creazione di una Map
const fruits = new Map();
// Aggiunta di un nuovo elemento alla Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Prova tu stesso

Attenzione:La chiave è l'oggetto (apples), non la stringa ("apples"):

istanza

fruits.get("apples"); // Restituisce undefined

Prova tu stesso

JavaScript Map.groupBy()

ES2024 ha aggiunto a JavaScript Map.groupBy() Metodo.

Map.groupBy() Il metodo raggruppa gli elementi dell'oggetto in base al valore di ritorno della funzione di callback.

Map.groupBy() Il metodo non cambia l'oggetto originale.

istanza

// Creazione di un array
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// Funzione di callback per il raggruppamento
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// Per gruppo per quantità
const result = Map.groupBy(fruits, myCallback);

Prova tu stesso

Supporto dei browser

Map.groupBy() È una caratteristica di ES2024.

A partire dal marzo 2024, tutti i nuovi browser supportano questa caratteristica:

La differenza tra Object.groupBy() e Map.groupBy()

Object.groupBy() E Map.groupBy() La differenza è:

Object.groupBy() Raggruppare gli elementi in un oggetto JavaScript.

Map.groupBy() Raggruppare gli elementi in un oggetto Map.

Manuale completo di Map

Per una guida completa, visitare il nostro:Manuale Map JavaScript.

Questo manuale contiene la descrizione e gli esempi di tutte le proprietà e metodi di Map.