JavaScript-kartor


Innehållsförteckning

    Visa innehållsförteckning

En karta innehåller nyckel-värdepar där nycklarna kan vara vilken datatyp som helst.

En karta kommer ihåg den ursprungliga insättningsordningen för nycklarna.

En karta har en egenskap som representerar storleken på kartan.

Kartmetoder

new Map()

Skapar ett nytt kartobjekt

set()

Ställer in värdet för en nyckel i en karta

get()

Hämtar värdet för en nyckel i en karta

clear()

Tar bort alla element från en karta

delete()

Tar bort ett kartelement som anges med en nyckel

has()

Returnerar sant om det finns en nyckel i en karta

forEach()

Anropar en återuppringning för varje nyckel/värdepar i en karta

entries()

Returnerar ett iteratorobjekt med paren [nyckel, värde] i en karta

keys()

Returnerar ett iteratorobjekt med nycklarna i en karta

values()

Returnerar ett iteratorobjekt av värdena i en karta

size

Returnerar antalet kartelement


Hur man skapar en karta

Du kan skapa en JavaScript-karta genom att:

  • Skickar en array till new Map()

  • Skapa en karta och använd Map.set()


new Map()

Du kan skapa en karta genom att skicka en Array till nya Map()-konstruktorn:

Exempel

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

Prova själv →

<!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 lägga till element till en karta med metoden set():

Exempel

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

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

Prova själv →

<!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 också användas för att ändra befintliga kartvärden:

Exempel

fruits.set("apples", 500);

Prova själv →

<!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() får värdet av en nyckel i en karta:

Exempel

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

Prova själv →

<!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>



Map.size

Egenskapen size returnerar antalet element i en karta:

Exempel

fruits.size;

Prova själv →

<!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() tar bort ett kartelement:

Exempel

fruits.delete("apples");

Prova själv →

<!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() tar bort alla element från en karta:

Exempel

fruits.clear();

Prova själv →

<!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() returnerar true om en nyckel finns i en karta:

Exempel

fruits.has("apples");

Prova själv →

<!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>

Prova detta:

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

Prova själv →

<!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>


Kartor är objekt

typeof returnerar objekt:

Exempel

// Returns object:
typeof fruits;

Prova själv →

<!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 Kartan returnerar true:

Exempel

// Returns true:
fruits instanceof Map;

Prova själv →

<!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-objekt vs kartor

Skillnader mellan JavaScript-objekt och kartor:

Not directly iterable

Direkt iterabel

Do not have a size property

Har en storleksfastighet

Keys must be Strings (or Symbols)

Nycklar kan vara vilken datatyp som helst

Keys are not well ordered

Nycklar beställs genom insättning

Have default keys

Har inga standardnycklar


Map.forEach()

Metoden forEach() anropar en återuppringning för varje nyckel/värdepar i en karta:

Exempel

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

Prova själv →

<!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() returnerar ett iteratorobjekt med [nyckel,värden] i en karta:

Exempel

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

Prova själv →

<!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() returnerar ett iteratorobjekt med nycklarna i en karta:

Exempel

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

Prova själv →

<!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() returnerar ett iteratorobjekt med värdena i en karta:

Exempel

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

Prova själv →

<!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 använda metoden values() för att summera värdena i en karta:

Exempel

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

Prova själv →

<!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>

Objekt som nycklar

Att kunna använda objekt som nycklar är en viktig kartfunktion.

Exempel

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

Prova själv →

<!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>

Kom ihåg: Nyckeln är ett objekt (äpplen), inte en sträng ("äpplen"):

Exempel

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

Prova själv →

<!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>


Webbläsarstöd

JavaScript-kartor stöds i alla webbläsare, förutom Internet Explorer:

Chrome Edge Firefox Safari Opera