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.
Skapar ett nytt kartobjekt
Ställer in värdet för en nyckel i en karta
Hämtar värdet för en nyckel i en karta
Tar bort alla element från en karta
Tar bort ett kartelement som anges med en nyckel
Returnerar sant om det finns en nyckel i en karta
Anropar en återuppringning för varje nyckel/värdepar i en karta
Returnerar ett iteratorobjekt med paren [nyckel, värde] i en karta
Returnerar ett iteratorobjekt med nycklarna i en karta
Returnerar ett iteratorobjekt av värdena i en karta
Returnerar antalet kartelement
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:
// 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()
:
// 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:
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:
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:
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:
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:
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:
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>
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>
typeof
returnerar objekt:
// 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:
// 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>
Direkt iterabel
Har en storleksfastighet
Nycklar kan vara vilken datatyp som helst
Nycklar beställs genom insättning
Har inga standardnycklar
Map.forEach()
Metoden forEach()
anropar en återuppringning för varje nyckel/värdepar i en karta:
// 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:
// 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:
// 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:
// 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:
// 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>
Att kunna använda objekt som nycklar är en viktig kartfunktion.
// 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"):
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>
JavaScript-kartor stöds i alla webbläsare, förutom Internet Explorer:
Chrome | Edge | Firefox | Safari | Opera |