JavaScript-kort

Indholdsfortegnelse

Vis indholdsfortegnelse

Et kort indeholder nøgle-værdi-par, hvor nøglerne kan være en hvilken som helst datatype.

Et kort husker den oprindelige indsættelsesrækkefølge for nøglerne.

Et kort har en egenskab, der repræsenterer størrelsen af kortet.

Kortmetoder

new Map(): Opretter et nyt kortobjekt
set(): Indstiller værdien for en nøgle i et kort
get(): Henter værdien for en nøgle i et kort
clear(): Fjerner alle elementer fra et kort
delete(): Fjerner et kortelement angivet med en nøgle
has(): Returnerer sand, hvis der findes en nøgle i et kort
forEach(): Kalder tilbagekald for hvert nøgle/værdi-par i et kort
entries(): Returnerer et iteratorobjekt med [nøgle, værdi]-parrene i et kort
keys(): Returnerer et iteratorobjekt med nøglerne i et kort
values(): Returnerer et iteratorobjekt af værdierne i et kort

size: Returnerer antallet af kortelementer

Sådan opretter du et kort

Du kan oprette et JavaScript-kort ved at:

Sender et array til new Map()
Opret et kort og brug Map.set()

`nyt kort()`

Du kan oprette et kort ved at videregive et array til new Map()-konstruktøren:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

`Map.set()`

Du kan tilføje elementer til et kort med metoden set():

Eksempel

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Metoden set() kan også bruges til at ændre eksisterende kortværdier:

Eksempel

fruits.set("apples", 500);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.set("apples", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

`Map.get()`

Metoden get() henter værdien af en nøgle i et kort:

Eksempel

fruits.get("apples");    // Returns 500

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

`Kort.størrelse`

Egenskaben size returnerer antallet af elementer i et kort:

Eksempel

fruits.size;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

`Map.delete()`

Metoden delete() fjerner et kortelement:

Eksempel

fruits.delete("apples");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

`Map.clear()`

Metoden clear() fjerner alle elementer fra et kort:

Eksempel

fruits.clear();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Clearing a Map:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Clear the Map
fruits.clear();

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

`Map.has()`

Metoden has() returnerer sand, hvis der findes en nøgle i et kort:

Eksempel

fruits.has("apples");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Prøv dette:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Kort er objekter

typeof returnerer objekt:

Eksempel

// Returns object:
typeof fruits;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map typeof:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = typeof fruits;
</script>

</body>
</html>

instanceof Kort returnerer sandt:

Eksempel

// Returns true:
fruits instanceof Map;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map instanceof:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits instanceof Map;
</script>

</body>
</html>

JavaScript-objekter vs. kort

Forskelle mellem JavaScript-objekter og kort:

Not directly iterable: Direkte iterable
Do not have a size property: Har en størrelse ejendom
Keys must be Strings (or Symbols): Nøgler kan være enhver datatype
Keys are not well ordered: Nøgler bestilles ved indsættelse
Have default keys: Har ikke standardnøgler

`Map.forEach()`

Metoden forEach() påkalder et tilbagekald for hvert nøgle/værdi-par i et kort:

Eksempel

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

`Map.entries()`

Metoden entries() returnerer et iteratorobjekt med [key,values] i et kort:

Eksempel

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.entries()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

`Map.keys()`

Metoden keys() returnerer et iteratorobjekt med nøglerne i et kort:

Eksempel

// List all keys
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.keys():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.keys()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

`Map.values()`

Metoden values() returnerer et iteratorobjekt med værdierne i et kort:

Eksempel

// List all values
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.values()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Du kan bruge metoden values() til at summere værdierne i et kort:

Eksempel

// Sum all values
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let total = 0;
for (const x of fruits.values()) {
  total += x;
}

document.getElementById("demo").innerHTML = total;
</script>

</body>
</html>

Objekter som nøgler

At kunne bruge objekter som nøgler er en vigtig kortfunktion.

Eksempel

// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

// Create a Map
const fruits = new Map();

// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Being able to use objects as keys is an important Map feature:</p>

<p id="demo"></p>

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

// Create a Map
const fruits = new Map();

// Add the Objects to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

document.getElementById("demo").innerHTML = fruits.get(apples);
</script>

</body>
</html>

Husk: Nøglen er et objekt (æbler), ikke en streng ("æbler"):

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>

<p id="demo"></p>

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

// Create a Map
const fruits = new Map();

// Add Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Browser support

JavaScript-kort understøttes i alle browsere undtagen Internet Explorer:


Chrome	Edge	Firefox	Safari	Opera