Kartta sisältää avain-arvo-pareja, joissa avaimet voivat olla mitä tahansa tietotyyppiä.
Kartta muistaa avainten alkuperäisen lisäysjärjestyksen.
Luo uuden kartan
Asettaa avaimen arvon kartassa
Hakee avaimen arvon kartassa
Poistaa avaimella määrittämän karttaelementin
Palauttaa tosi, jos avain on olemassa kartassa
Kutsuu funktion jokaiselle avain/arvo-parille kartassa
Palauttaa iteraattorin, jossa on [avain, arvo]-parit kartassa
Palauttaa kartan elementtien määrän
Voit luoda JavaScript-kartan seuraavasti:
Array välitetään uudelle kartalle()
Luo kartta ja käytä Map.set()
-ohjelmaa
uusi Map()
-menetelmäVoit luoda kartan välittämällä taulukon uudelle Map()
-konstruktorille:
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Kokeile itse →
<!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()
-menetelmäVoit lisätä karttaan elementtejä set()
-menetelmällä:
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
Kokeile itse →
<!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>
set()
-menetelmää voidaan käyttää myös olemassa olevien kartta-arvojen muuttamiseen:
fruits.set("apples", 200);
Kokeile itse →
<!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()
-menetelmäMetodi get()
saa avaimen arvon kartassa:
fruits.get("apples"); // Returns 500
Kokeile itse →
<!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>
size
-ominaisuusOminaisuus koko
palauttaa kartan elementtien määrän:
fruits.size;
Kokeile itse →
<!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()
-menetelmäMetodi delete()
poistaa karttaelementin:
fruits.delete("apples");
Kokeile itse →
<!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()
-menetelmäMetodi has()
palauttaa tosi, jos kartassa on avain:
fruits.has("apples");
Kokeile itse →
<!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");
Kokeile itse →
<!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>
Iteroitavissa: Ei suoraan iteroitavissa
Koko: Ei ole kokoominaisuutta
Avaintyypit: näppäinten on oltava merkkijonoja (tai symboleja)
Avainjärjestys: Avaimia ei ole järjestetty kunnolla
Oletusasetukset: oletusavaimet
Iteroitavissa: Suoraan iteroitavissa
Koko: ole koko-ominaisuus
Avaintyypit: Avaimet voivat olla mitä tahansa tietotyyppejä
Avainjärjestys: Avaimet järjestetään lisäyksen mukaan
Oletusasetukset: Ei ole oletusavaimia
forEach()
-menetelmäMetodi forEach()
kutsuu funktiota jokaiselle kartan avain/arvo-parille:
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Kokeile itse →
<!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()
-menetelmäMetodi entries()
palauttaa iteraattoriobjektin, jossa on [avain, arvot] kartassa:
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
Kokeile itse →
<!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-karttoja tuetaan kaikissa selaimissa, paitsi Internet Explorerissa:
Chrome | Edge | Firefox | Safari | Opera |