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.
Skapar en ny karta
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 ett kartelement som anges med nyckeln
Returnerar sant om det finns en nyckel i en karta
Anropar en funktion för varje nyckel/värdepar i en karta
Returnerar en iterator med paren [nyckel, värde] i en karta
Returnerar antalet element i 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:
// 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>
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", 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([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.set("apples", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
get()Metoden get() får värdet av en nyckel i en karta:
fruits.get("apples"); // Returns 500Prova 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>
sizeEgenskapen 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>
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>
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>
Iterabel: Ej direkt iterabel
Storlek: Har ingen storleksegenskap
Nyckeltyper: Nycklarna måste vara strängar (eller symboler)
Nyckelordning: Nycklarna är inte välordnade
Standardinställningar: Har standardnycklar
Iterable: Direkt iterable
Storlek: Ha en storleksegenskap
Nyckeltyper: Nycklar kan vara vilken datatyp som helst
Nyckelordning: Nycklar ordnas genom infogning
Standardinställningar: Har inga standardnycklar
forEach()Metoden forEach() anropar en funktion 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>
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>
JavaScript-kartor stöds i alla webbläsare, förutom Internet Explorer:
| Chrome | Edge | Firefox | Safari | Opera |