JavaScript Map Methoden

new Map() methode

Men kan een array doorgeven aan de new Map() De constructor om een Map te maken:

instantie

// Een Map aanmaken
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Probeer het zelf uit

Map.get()

het kan worden gebruikt get() De methode haalt de waarde van een sleutel in de Map op:

instantie

fruits.get("apples");

Probeer het zelf uit

Map.set()

het kan worden gebruikt set() De methode voegt een element toe aan de Map:

instantie

// Een Map aanmaken
const fruits = new Map();
// Map-waarden instellen
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Probeer het zelf uit

set() De methode kan ook gebruikt worden om bestaande Map-waarden te wijzigen:

instantie

fruits.set("apples", 500);

Probeer het zelf uit

Map.size

size De eigenschap retourneert het aantal elementen in de Map:

instantie

fruits.size;

Probeer het zelf uit

Map.delete()

delete() De methode verwijdert een element uit de Map:

instantie

fruits.delete("apples");

Probeer het zelf uit

Map.clear()

clear() De methode verwijdert alle elementen uit de Map:

instantie

fruits.clear();

Probeer het zelf uit

Map.has()

Als er een bepaalde sleutel in de Map bestaat:has() De methode retourneert true:

instantie

fruits.has("apples");

Probeer het zelf uit

Probeer de volgende code:

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

Probeer het zelf uit

Map.forEach()

forEach() De methode roept de callbackfunctie aan voor elk key-value paar in de Map:

instantie

// Lijst van alle items
let text = "";
fruits.forEach(function(value, key) {
  text += sleutel + ' = ' + waarde;
});

Probeer het zelf uit

Map.entries()

entries() De methode retourneert een object dat de [sleutel, waarde] Het juiste iteratorobject:

instantie

// Lijst van alle items
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Probeer het zelf uit

Map.keys()

keys() De methode retourneert een iteratorobject dat de sleutels van de Map bevat:

instantie

// Lijst van alle sleutels
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Probeer het zelf uit

Map.values()

values() de methode retourneert een iteratorobject dat de waarden van de Map bevat:

instantie

// Alle waarden opsommen
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Probeer het zelf uit

het kan worden gebruikt values() de methode berekent de som van de waarden in de Map:

instantie

// De som van alle waarden berekenen
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Probeer het zelf uit

objecten als sleutels

Tip:het gebruik van objecten als sleutels is een belangrijke eigenschap van Map.

instantie

// Objecten aanmaken
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Een Map aanmaken
const fruits = new Map();
// Nieuwe elementen toevoegen aan Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Probeer het zelf uit

Opmerking:de sleutel is een object (apples), niet een tekenreeks ("apples"):

instantie

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

Probeer het zelf uit

JavaScript Map.groupBy()

ES2024 voegt aan JavaScript toe Map.groupBy() methode.

Map.groupBy() de methode groepeert de elementen van het object op basis van de door de callbackfunctie teruggegeven tekenreekswaarde.

Map.groupBy() de methode wijzigt het oorspronkelijke object niet.

instantie

// Een array aanmaken
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// Callbackfunctie voor het groeperen
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// Groeperen op basis van hoeveelheid
const result = Map.groupBy(fruits, myCallback);

Probeer het zelf uit

Browserondersteuning

Map.groupBy() is een ES2024 kenmerk.

Vanaf maart 2024 ondersteunen nieuwe browsers deze functie:

Het verschil tussen Object.groupBy() en Map.groupBy()

Object.groupBy() en Map.groupBy() Het verschil zit in:

Object.groupBy() Groepeer elementen in een JavaScript object.

Map.groupBy() Groepeer elementen in een Map object.

Volledige Map Referentie Handleiding

Voor een volledige referentie, bezoek onze:JavaScript Map Referenties.

Dit handleiding bevat beschrijvingen en voorbeelden van alle Map eigenschappen en methoden.